Bootstrap 面板 Header 和 Link 用于手风琴和格式化内容

Question

我是 Bootstrap 的新手，我正在寻找创建具有 3 列的可点击面板 Header 的解决方案。

现在我的代码看起来像：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="panel panel-default">
    <div class="panel-heading">
        <div class="panel-title">
            <a style="display: block" data-toggle="collapse" data-parent="#accordion" href="#panelBody<%=trimmedKennzeichen%>">
                <div class="col-xs-4">
                    <h4>t1</h4>
                </div>
                <div class="col-xs-4 text-center">
                    <h4>t2</h4>
                </div>
                <div class="col-xs-4">
                    <h4>t3</h4>
                </div>
            </a>
        </div>
    </div>
</div>

但这破坏了我的格式，结果很糟糕。

所以我的问题是如何获得带有格式化内容（3 列不同水平对齐）的 Panel-Header 并且整个 header 应该是 link 以打开 panel-body 就像手风琴应该做的那样。

我希望你能帮助我:)

亲切的问候

Answer 1

切勿在没有 div.row 的情况下使用 div.col-* 类作为父项。

因为没有行怎么能有列呢。首先应该有一行，然后在其中添加列 ;)

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="panel panel-default">
<div class="panel-heading">
    <div class="panel-title">
        <a style="display: block" data-toggle="collapse"
            data-parent="#accordion" href="#panelBody<%=trimmedKennzeichen%>">
            <div class="row">
                <div class="col-xs-4">
                    <h4>t1</h4>
                </div>
                <div class="col-xs-4">
                    <h4>t2</h4>
                </div>
                <div class="col-xs-4">
                  <h4>t3</h4>
                </div>  
            </div>
        </a>
    </div>
</div>

一些常规规则：

Columns are always within a row.

<div class="row">
    <div class="col-md-4"></div>
    <div class="col-md-4"></div>
    <div class="col-md-4"></div>
</row>

Column never has Columns within. If you want to add more columns within one column follow rule 1. Add row first then add columns in it.

<div class="row">
    <div class="col-md-6">
        <!-- Never do like this -->
        <div class="col-md-8"></div>
        <div class="col-md-4"></div>
    </div>
    <div class="col-md-6">
        <!-- Do Like this: -->
        <div class="row">
            <div class="col-md-8"></div>
            <div class="col-md-4"></div>
        </row>
    </div>    
</div>

Never make row within row. row always has columns within.

<div class="row">
    <!-- Never do like this: -->
    <div class="row"></row>
    <div class="row"></row>
</div>

Bootstrap 面板 Header 和 Link 用于手风琴和格式化内容

Bootstrap Panel Header with Link for accordion and formatted Content

jsp

panel

accordion

twitter-bootstrap