是否可以使用Bootstrap来折叠侧边栏div(仅在手机上)?我该如何做类似于图中示例的事情呢?因此,在手机上,侧边栏会折叠,当点击时,会展开。我不明白媒体查询如何允许我这样做,因为涉及到jQuery。
http://i46.tinypic.com/2mzxflu.jpg
我在这里看到过一些类似的问题,但没有完全像这样的。有没有人能解释一下,或者至少给我指出正确的方向?
是否可以使用Bootstrap来折叠侧边栏div(仅在手机上)?我该如何做类似于图中示例的事情呢?因此,在手机上,侧边栏会折叠,当点击时,会展开。我不明白媒体查询如何允许我这样做,因为涉及到jQuery。
http://i46.tinypic.com/2mzxflu.jpg
我在这里看到过一些类似的问题,但没有完全像这样的。有没有人能解释一下,或者至少给我指出正确的方向?
3条答案
按热度按时间cqoc49vn1#
我最终偶然发现了这个问题,并为它添加了一个CSS类:
然后,我把要在中以下屏幕上折叠的元素的类设置为
collapse-non-md
,瞧,它在小型浏览器上折叠,在中型浏览器上打开。它仍然可以正常打开和关闭(.in
类覆盖.collapse-non-md
)。5cnsuln72#
又急又脏的道:为要在桌面屏幕上显示的完整大小的侧栏编写代码,并为要在移动的设备上显示的折叠侧栏编写单独的标记。
然后选择何时显示侧边栏的任一版本,使用bootstrap提供的类根据媒体查询隐藏和显示内容。
折叠的边栏:
.hidden-desktop .hidden-tablet .visible-phone
完整侧边栏:
hidden-phone .visible-tablet .visible-desktop
lnlaulya3#
我在使用Bootstrap V3时也遇到了同样的问题。我按照官方文档上的教程操作,但是在手机上无法默认关闭侧边栏。
这是由于Bootstrap V3源文件中的一个错误(自定义版本生成于2013/09/05)。只需在原始bootstrap.css之后加载以下CSS:
(这些样式来自原始Bootstrap V3源代码的早期版本)。
否则,我唯一的错误就是在HTML页面中初始化了collapse插件。
......然后只需删除它,折叠插件将像一个魅力。