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

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

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

然后，要选择何时显示任一版本的侧边栏，请使用bootstrap 提供的类来根据媒体查询隐藏和显示内容。

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

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