如何获取twitter-bootstrap导航栏子项目以在小屏幕上折叠/展开？

Question

twitter-bootstrap'hero'示例（http://twitter.github.io/bootstrap/examples/hero.html）效果很好。冒着描述明显的风险......在小屏幕上，当导航栏菜单被激活时，只有第一级项目可见，子项目被折叠。当轻敲带有子项目的项目时，子项目会展开并变得可见。他们也可以通过再次敲击父母来折叠。

我在Joomla网站上使用引导程序模板（http://wright.gvta.net/）。不幸的是，当在小屏幕上激活导航栏时，它扩展了许多子项目。点击父项不会展开/折叠其子项。

如何获取twitter-bootstrap导航栏子项目以在小屏幕上折叠/展开？ 什么引导代码/文件负责这种行为？

我知道一些CSS和JavaScript，但不足以解决这个问题。

谢谢。

Answer 1

您将需要Bootstrap Collapse JS。然后你需要一个包装你的导航栏的<div class="nav-collapse collapse">。最后，将data-toggle="collapse"属性应用于仅在使用CSS媒体查询的较小屏幕上显示的按钮。

查看this example的源代码的一个工作示例