Question

是否可以使用bootstrap折叠侧边栏div - 仅在移动设备上？我该怎么做像图像中的例子？因此，在移动设备上，侧边栏会折叠，单击时会展开。我不明白媒体查询如何允许我这样做，因为所涉及的jquery。

http://i46.tinypic.com/2mzxflu.jpg

在这里看过一些类似的问题，但没有完全像这样。有人可以解释或者至少指出我正确的方向吗？提前谢谢。

Answer 1

我最终遇到了这个问题并为它添加了一个CSS类：

.collapse-non-md {
    height: 0;
    display: none;
}
.collapse-non-md.collapsing {
    display: block;
}

@media (min-width: 992px) {
    .collapse-non-md {
        height: auto;
        display: block;
    }
}

然后我将我想要折叠的元素的类设置在中等到collapse-non-md以下的屏幕上，并且它在小浏览器上折叠并在中等浏览器上打开。它仍然可以正常方式打开和关闭（.in类覆盖.collapse-non-md）。

Answer 2

快速而肮脏的方式：将为要在桌面屏幕上显示的完整大小的侧边栏编写代码，并为折叠的侧边栏单独标记以在移动设备上显示。

然后选择何时显示侧边栏的任一版本，使用classes provided by bootstrap隐藏并根据媒体查询显示内容。

折叠边栏：.hidden-desktop .hidden-tablet .visible-phone

完整侧边栏：hidden-phone .visible-tablet .visible-desktop

Answer 3

使用Bootstrap V3时遇到了同样的问题。我按照官方文档中的教程进行了操作，但默认情况下无法在移动设备上删除侧边栏。

这来自Bootstrap V3源文件中的错误（在2013/09/05生成的自定义版本）。只需在原始bootstrap.css之后加载以下CSS：

.collapse{display:none}.collapse.in{display:block}.collapsing{position:relative;height:0;overflow:hidden;-webkit-transition:height .35s ease;transition:height .35s ease}
@media screen and (min-width:768px){.nav-collapse.collapse{display:block!important;height:auto!important;overflow:visible!important}}

（这些样式来自原始Bootstrap V3源的先前版本。）

否则，我唯一的错误就是在我的HTML页面中初始化崩溃插件。所以如果你的HTML源代码中有这样的东西：

<script type="text/javascript">
    $(document).ready(function(){
        $('.collapse').collapse();
    });
</script>

...然后只需删除它，崩溃插件将像魅力一样工作。

仅使用引导程序折叠移动屏幕上的div /元素。示例图片

3 个答案: