グループを1つの行にまとめます。

Question

折り畳みグループを作成しようとすると、1行になるという問題があります。

<div class="panel-group row" id="accordion"> 
    <div class="panel panel-default col-xs-3" id="panel1"> 
    <div class="panel-heading"> 
     <h4 class="panel-title"> 
     <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> 
      Collapsible Group Item #1 
     </a> 
     </h4> 
    </div> 
    </div> 
    <div class="panel panel-default col-xs-3" id="panel2"> 
    <div class="panel-heading"> 
     <h4 class="panel-title"> 
     <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"> 
      Collapsible Group Item #2 
     </a> 
     </h4> 
    </div> 
    </div> 
    <div class="panel panel-default col-xs-3" id="panel3"> 
    <div class="panel-heading"> 
     <h4 class="panel-title"> 
     <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree"> 
      Collapsible Group Item #3 
     </a> 
     </h4> 
    </div> 
    </div> 
    </div> 

    <div class="row panel"> 
    <div id="collapseOne" class="panel-collapse collapsed in"> 
     <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 id="collapseTwo" class="panel-collapse collapsed in"> 
     <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 id="collapseThree" class="panel-collapse collapsed in"> 
     <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> 

thisのように働く：私は、次のHTMLを持っています。私が期待していることは、常に一列に崩壊が表示されることです。現時点では、私は開けたときに他の崩壊を閉じる能力を失った。私は間違って何をしていますか？

UPDATE：

より正確には、私は、行を一度に一つだけの崩壊を示したいと思います。現時点では不可能です。どうして？

Answer 1

お探しのものはタブです。折りたたみグループは使用しないでください。 Bootstrap Tabsをご覧ください。あなたが本当に崩壊するグループを使用したいなら、あなたはjavascriptでこれを解決することができます。乾杯！