帶鏈接的Bootstrap面板頁眉，用於手風琴和格式化內容

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.col-*類，而div.row父。

因爲你怎麼能有沒有行的列。首先應該有一排然後你把它添加列）

<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.首先添加行，然後在其中添加列。

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

決不排內使行。行內總是有列。

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