ブートストラップはアコーディオンに反応しますか？

Question

Bootstrap 3 Accordion Collapseを使用していますが、現在はすべてが1つの列に読み込まれています。パネルで複数の列をデスクトップ解像度で、1列をモバイルモードで使用するにはどうすればよいですか？

 <div class="row"> 

      <div class="panel-group" id="accordion"> 

       <?php 
       foreach ($states as &$state) { 
        ?> 
        <div class="panel panel-default"> 
         <div class="panel-heading"> 
          <h4 class="panel-title"> 
           <a data-toggle="collapse" data-parent="#accordion" href="#<?php echo $state; ?>"> 
            <?php echo $state; ?></a> 
          </h4> 
         </div> 
         <div id="<?php echo $state; ?>" class="panel-collapse collapse in"> 
          <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
           sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad 
           minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea 
           commodo consequat.</div> 
         </div> 
        </div> 
       <?php } 
       ?> 
      </div> 

     </div> 

EDIT

これは私のedided HTML

  <div class="row"> 

       <div class="col-md-4 col-xs-12"> 

        <div class="panel-group" id="accordion"> 

         <?php 
         foreach ($states as &$state) { 
          ?> 
          <div class="panel panel-default"> 
           <div class="panel-heading"> 
            <h4 class="panel-title"> 
             <a data-toggle="collapse" data-parent="#accordion" href="#<?php echo preg_replace('/\s+/', '', $state); ?>"> 
              <?php echo $state; ?></a> 
            </h4> 
           </div> 
           <div id="<?php echo preg_replace('/\s+/', '', $state); ?>" class="panel-collapse collapse in"> 
            <div class="panel-body">test</div> 
           </div> 
          </div> 
         <?php } 
         ?> 

        </div> 

       </div> 

      </div> 

であり、それは次のようになります。デスクトップの解像度

Answer 1

あなたの改正コードは文句を言わないだけで動作します。 foreachの中にはcolがあるので、それらはすべて独立してラップされます。

はこれを試してみてください：

<div class="panel-group" id="accordion"> 
<div class="row"> 
    <?php foreach ($states as &$state) { ?> 
     <div class="col-xs-12 col-md-4"> 
      <div class="panel panel-default"> 
       <div class="panel-heading"> 
        <h4 class="panel-title"> 
         <a data-toggle="collapse" data-parent="#accordion" href="#<?php echo $state; ?>"> 
          <?php echo $state; ?></a> 
        </h4> 
       </div> 
       <div id="<?php echo $state; ?>" class="panel-collapse collapse in"> 
        <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
         sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad 
         minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea 
         commodo consequat.</div> 
       </div> 
      </div> 
     </div><!-- col-md-4 now closes here --> 
    <?php } ?> 
</div> 

また、それはあなたのrowと

うまくいけば、これはあなたのために働くcolsわたってるしきdivを持っているブートストラップ内の悪い習慣があります！

Answer 2

で唯一のスリム列私は、これはあなたが何を意味するかであるかわからないが、col-クラスであなたのアコーディオンをラップするのに十分ではないでしょうか？

同様：

<div class="row"> 
    <div class="col-xs-12 col-md-4"> 
     <div class="panel-group" id="accordion"> 

      <?php 
      foreach ($states as &$state) { 
       ?> 
       <div class="panel panel-default"> 
        <div class="panel-heading"> 
         <h4 class="panel-title"> 
          <a data-toggle="collapse" data-parent="#accordion" href="#<?php echo $state; ?>"> 
           <?php echo $state; ?></a> 
         </h4> 
        </div> 
        <div id="<?php echo $state; ?>" class="panel-collapse collapse in"> 
         <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
          sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad 
          minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea 
          commodo consequat.</div> 
        </div> 
       </div> 
      <?php } 
      ?> 
     </div> 
    </div><!-- colse col-md-4 --> 
    </div> 

Answer 3

これはあなたの答えである場合：

あなたがしなければならないすべては、パネルグループの前にブートストラップ列クラスを追加しています。

タブレット画面サイズのCOL-XS-12より小さな画面サイズ、COL-MD-4媒体画面サイズ/ PC、 COL-LG-12大画面サイズのために、COL-SM-6。あなたはあなたが1 colにそれらのすべてをラップしているforeach前colを定義しているので、