如何在Bootstrap 3中創建雙列手風琴？

Question

我試圖在col-sm-6中包裹一半面板。它成功將手風琴分解爲兩列，但摺疊功能打破。他們不會自動崩潰了。

有關如何在Bootstrap 3中正確工作的任何想法？

Here是我正在使用的代碼。請注意，點擊另一個標題時它們不會自動摺疊。

Answer 1

首先你的例子（http://bootply.com/84122）將被打破的原因。在你的例子中，你的div.panel包裝在div.col-xs-6中。該插件不允許這種包裝。 div.panel應該是你的div＃accordion的直接孩子。關係將由data-parent="#accordion"定義。

以上內容來自collapse.js第51行：var actives = this.$parent && this.$parent.find('> .panel > .in')。目前我不認爲這是一個錯誤，因爲這種嚴格的嵌套可以讓面板嵌套沒有問題。 當你用var actives = this.$parent && this.$parent.find(' .panel > .in')替換這一行（刪除.panel之前的>>）時，你的例子將運行良好。 （解決方案1）。

在我的評論中，我建議使用這個：http://bootply.com/83750。這將工作，而不會改變javascript導致col-x-x類被添加到div.panel而不是包裝它們。你提到像奇怪的轉變這樣的問題，你可以通過在每個第二個面板後添加一個clearfix（<div class="clearfix hidden-xs"></div>）來防止這種問題。 在你的情況下，你可以離開hidden-xs因爲你使用col-xs-6類（從不崩潰）。

沒有電網崩潰：

<div class="container"> 
<div class="panel-group" id="accordion"> 
    <div class="panel panel-default col-xs-6"> 
    <div class="panel-heading"> 
     <h4 class="panel-title"> 
     <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> 
      Collapsible Group Item #1 
     </a> 
     </h4> 
    </div> 
    <div id="collapseOne" class="panel-collapse collapse"> 
     <div class="panel-body"> 
     Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. 
     </div> 
    </div> 
    </div> 
    <div class="panel panel-default col-xs-6"> 
    <div class="panel-heading"> 
     <h4 class="panel-title"> 
     <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"> 
      Collapsible Group Item #2 
     </a> 
     </h4> 
    </div> 
    <div id="collapseTwo" class="panel-collapse collapse"> 
     <div class="panel-body"> 
     Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. 
     </div> 
    </div> 
    </div> 
<div class="clearfix"></div> 
    <div class="panel panel-default col-xs-6"> 
    <div class="panel-heading"> 
     <h4 class="panel-title"> 
     <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseThree"> 
      Collapsible Group Item #3 
     </a> 
     </h4> 
    </div> 
    <div id="collapseThree" class="panel-collapse collapse"> 
     <div class="panel-body"> 
     Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. 
     </div> 
    </div> 
    </div> 
    <div class="panel panel-default col-xs-6"> 
    <div class="panel-heading"> 
     <h4 class="panel-title"> 
     <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseFour"> 
      Collapsible Group Item #4 
     </a> 
     </h4> 
    </div> 
    <div id="collapseFour" class="panel-collapse collapse"> 
     <div class="panel-body"> 
     Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. 
     </div> 
    </div> 
    </div> 
</div>  
</div>