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，用于平板电脑屏幕尺寸。