根据屏幕大小折叠div元素

Question

我只是想知道,根据屏幕尺寸,你可以使用bootstraps 手风琴,所以举个例如我说我有一个div我想要定期显示所有东西,但在移动视图中我希望它崩溃.

有什么建议？

Answer 1

以下是使用Shail建议方法的示例,但没有重复布局.预期的行为是使一个元素在Bootstrap 3的响应断点(screen-md)之一处崩溃.

@media (min-width: @screen-md)
{
    #filters
    {
        display: block;
    }
}

<button type="button" 
        data-toggle="collapse" 
        data-target="#filters" 
        class="visible-xs visible-sm collapsed">Filter</button>

<div id="filters" class="collapse">...</div>

#filters除非应用css媒体查询并覆盖collapse类的行为,否则标记将被折叠.

#filters只有在媒体查询不再适用时,才会显示要展开的按钮.

Answer 2

您可以在引导程序中使用响应式实用程序类，请检查此页面以获取更多详细信息http://twitter.github.com/bootstrap/scaffolding.html#responsive

就像是

  <div class="visible-phone">accordion</div> 
  <div class="visible-desktop">all data you want to display</div>

Jsfiddle 演示