bootstrap讓手風琴響應？

Question

我正在使用Bootstrap 3 Accordion Collapse，現在一切都加載到一列中，我如何製作它以便面板在桌面分辨率和移動模式下使用多列？

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

編輯

這是我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所以你所有的人都包裹成一個col。你應該在你的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> 

而且它是內引導不好的做法，有div插圖中的row和cols

希望這對你的作品！

Answer 2

只有一個苗條列，我不知道這是你的意思，但不會是足夠的包裹你的手風琴在課堂上同事？

像：

<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，用於平板電腦屏幕尺寸。