使用 Bootstrap 进行六列布局的手风琴答案

【问题标题】：Accordion to six column layout with Bootstrap使用 Bootstrap 进行六列布局的手风琴
【发布时间】：2015-07-30 21:40:37
【问题描述】：

我正在尝试让以下手风琴在屏幕更宽时转换为六列引导布局。我可以轻松地拥有两个设置版本，手风琴在 xs 中可见，第二个版本在 sm 及更高版本中可见，但我想保留一个。任何帮助和/或提示将不胜感激。

<div class="panel-group visible-xs text-center" id="accordion1">
   <div class="panel panel-default">
    <div class="panel-heading accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion1,#accordion2,#accordion3" data-target="#collapseOne1">
         <h4 class="panel-title">ABOUT US</h4>

    </div>
    <div id="collapseOne1" class="panel-collapse collapse">
        <div class="panel-body">
                <ul>
                    <li><a href="">Events</a>
                    </li>
                    <li><a href="">Events</a>
                    </li>
                </ul>
        </div>
    </div>
</div>


    <div class="panel panel-default">
    <div class="panel-heading accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion1,#accordion2,#accordion3" data-target="#collapseOne2">
         <h4 class="panel-title">ABOUT US</h4>
    </div>
    <div id="collapseOne2" class="panel-collapse collapse">
        <div class="panel-body">
                <ul>
                    <li><a href="">Events</a></li>
                    <li><a href="">Events</a></li>
                    <li><a href="">Events</a></li>
                    <li><a href="">Events</a></li>
                    <li><a href="">Events</a></li>
                    <li><a href="">Events</a></li>
                    <li><a href="">Events</a></li>
                    <li><a href="">Events</a></li>
                    <li><a href="">Events</a></li>
                    <li><a href="">Events</a></li>
                    <li><a href="">Events</a></li>
                </ul>
        </div>
    </div>
</div>


      <div class="panel panel-default">
    <div class="panel-heading accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion1,#accordion2,#accordion3" data-target="#collapseOne3">
         <h4 class="panel-title">ABOUT US</h4>
    </div>
    <div id="collapseOne3" class="panel-collapse collapse">
        <div class="panel-body">
                <ul>
                    <li><a href="">Events</a></li>
                    <li><a href="">Events</a></li>
                    <li><a href="">Events</a></li>
                    <li><a href="">Events</a></li>
                    <li><a href="">Events</a></li>
                </ul>
        </div>
    </div>
</div>

    <div class="panel panel-default">
    <div class="panel-heading accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion1,#accordion2,#accordion3" data-target="#collapseOne4">
         <h4 class="panel-title">ABOUT US</h4>
    </div>
    <div id="collapseOne4" class="panel-collapse collapse">
        <div class="panel-body">
                <ul>
                    <li><a href="">Events</a></li>
                    <li><a href="">Events</a></li>
                    <li><a href="">Events</a></li>
                    <li><a href="">Events</a></li>
                    <li><a href="">Events</a></li>
                    <li><a href="">Events</a></li>
                    <li><a href="">Events</a></li>
                </ul>
        </div>
    </div>
</div>

    <div class="panel panel-default">
    <div class="panel-heading accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion1,#accordion2,#accordion3" data-target="#collapseOne5">
         <h4 class="panel-title">ABOUT US</h4>
    </div>
    <div id="collapseOne5" class="panel-collapse collapse">
        <div class="panel-body">
                <ul>
                    <li><a href="">Events</a></li>
                    <li><a href="">Events</a></li>
                    <li><a href="">Events</a></li>
                    <li><a href="">Events</a></li>
                    <li><a href="">Events</a></li>
                    <li><a href="">Events</a></li>
                    <li><a href="">Events</a></li>
                    <li><a href="">Events</a></li>
                    <li><a href="">Events</a></li>
                    <li><a href="">Events</a></li>
                </ul>
        </div>
    </div>
</div>
   <div class="panel panel-default">
    <div class="panel-heading accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion1,#accordion2,#accordion3" data-target="#collapseOne6">
         <h4 class="panel-title">ABOUT US</h4>

    </div>
    <div id="collapseOne6" class="panel-collapse collapse">
        <div class="panel-body">
                <ul>
                    <li><a href="">Events</a></li>
                    <li><a href="">Events</a></li>
                    <li><a href="">Events</a></li>
                    <li><a href="">Events</a></li>
                    <li><a href="">Events</a></li>
                    <li><a href="">Events</a></li>
                    <li><a href="">Events</a></li>
                    <li><a href="">Events</a></li>
                    <li><a href="">Events</a></li>
                    <li><a href="">Events</a></li>
                </ul>
        </div>
    </div>
</div>

fiddle.

【问题讨论】：

我不明白这个问题，你又想做什么，有什么问题？
我只希望内容在移动宽度之上“从手风琴中出来”，并跨六列显示，每个 div ul 在自己的列中。基本上，我如何以更宽的宽度将内容拉出手风琴。
您想要xs 的手风琴和sm 及更大的常规divs 吗？
是的，似曾相识……这就是我想要的……感谢您的关注/帮助。
所有，我最终将我的代码从引导手风琴中取出，并在没有 BS 的帮助下使用了纯 html/css/js 解决方案。不完全是这个问题的解决方案，而是我必须这样做的方式。 ...我会在有时间的时候重新审视这个 - 必须有办法！

标签： twitter-bootstrap

【解决方案1】：

1。我能想到的唯一解决方案无需复制您的代码内容是在服务器（django）端获取设备宽度并使用 a) ah 手风琴为@987654324 渲染模板@ 和 b) 标准 divs 用于其他任何内容。没做过，不过好像是possible。

2。另一种选择是使用Bootstrap的responsive utilities：

<div class="visible-xs">phone size
    <!-- content in accordion goes here -->
</div>
<div class="hidden-xs">sm and larger
    <!-- same content in standard divs -->
</div>

^fiddle^

如您所见，第二个选项需要重复内容，这是一种不好的做法 - 重构和更新将是一场噩梦。

老实说，我不会使用上述任何选项，但我认为您想了解这些。您可以做的可能是找到“扩展”第二个选项的方法，并可能从js 填充您的divs - 可能会是大量文件。

不管怎样，让我知道结果如何。

【讨论】：

感谢您的回复。我目前为 xs 设置了一个，为 sm 及以上设置了第二个，但就像你说的，重复的内容是我试图避免的。我将继续关注这一点并跟进任何进展。

【解决方案2】：

试图避免重复内容的问题在于您具有数据切换（等）属性。如果您使用响应式引导工具包 javascript:https://github.com/maciej-gurban/responsive-bootstrap-toolkit 之类的东西检测到正确的屏幕分辨率，则可以通过在页面加载时将 ul 标签移动到干净的地方来避免它们的干扰。

类似

  [html contains your accordion as normal, plus this:]
  <div id="accordion-grid" class="row"></div>

  <script>
      (function($, viewport) {
            $(document.ready(checkAccordionSize(viewport));

            function checkAccordionSize(vp) {
                  if (vp.is('>xs')) {
                    //gather the UL tags. for each one:
                    //create a new column in the extra div 
                    //then move the UL tag there. 

                    //when done, use jQuery .hide() to hide the accordion.
                  } 
             }
     })(jQuery, ResponsiveBootstrapToolkit);
</script>

你也可以支持 window.resize 做更多的工作。

【讨论】：