Twitter bootstrap 仅使用引导在移动屏幕上折叠div/元素。示例图片

是否可以使用引导折叠边栏分区（仅在手机上）？我将如何着手做像图中的示例这样的事情？因此，在手机上，边栏会折叠，单击时会展开。由于涉及jquery，我不明白媒体查询如何允许我这样做

---

我在这里看到过一些类似的问题，但没有一个是这样的。有人能给我解释一下，或者至少给我指出正确的方向吗？提前感谢。

一个快速而肮脏的方法是：为要在桌面屏幕上显示的全尺寸侧边栏编写代码，并为要在移动设备上显示的折叠侧边栏编写单独的标记

然后，要选择何时显示任一版本的侧边栏，请使用隐藏和显示基于媒体查询的内容

折叠的边栏：

。隐藏的桌面。隐藏的平板电脑。可见的手机

---

完整侧边栏：

隐藏的电话。可见的平板电脑。可见的桌面

我在使用Bootstrap V3时遇到了同样的问题。我遵循了官方文档的教程，但在手机上无法使边栏默认崩溃

这源于Bootstrap V3源文件中的一个bug（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}}

（这些样式来自原始引导V3源代码的早期版本）

否则，我唯一的错误就是在HTML页面中初始化折叠插件。因此，如果您的HTML源代码中有类似的内容：

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

$（文档）.ready（函数（）{
$（'.collapse'）.collapse（）；
});

---

…然后只需删除它，折叠插件就会像一个符咒一样工作。

我最终无意中发现了这个问题，并为它添加了一个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;
    }
}

---

然后我将我想要在中下方屏幕上折叠的元素的类设置为

折叠非md

，瞧，它在小型浏览器上折叠，在中型浏览器上打开。它仍然可以正常打开和关闭（类中的

.in重写
.collapse non-md
）。
谢谢，这样就可以了。但我希望找到一个解决方案，而不必有两个边栏。我相信这是可能的。很好，这个很方便，谢谢！我拿出了高度css，因为它给出了奇怪的结果。很高兴我能帮上忙。我现在记不清高度是多少，可能是滑动动画。请参见：