带有手风琴和格式化内容链接的引导面板标题

Question

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

现在我的代码看起来像：

<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 列），整个标题应该是打开面板主体的链接，就像手风琴应该做的那样。

我希望你能帮助我:)

亲切的问候

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>

一些正常的规则：

1. 列总是在一行中。

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

1. 列中永远不会有列。如果您想在一列中添加更多列，请遵循规则 1。首先添加行，然后在其中添加列。

<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>

1. 切勿在行中排列。行中总是有列。

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