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

Posted 2023-03-06

【中文标题】如何让 twitter-bootstrap 导航栏子项在小屏幕上折叠/展开？

【英文标题】：How do I get twitter-bootstrap navbar subitems to collapse/expand on small screens?

【发布时间】：2013-03-28 13:57:39

【问题描述】：

twitter-bootstrap 'hero' 示例 (http://twitter.github.io/bootstrap/examples/hero.html) 运行良好。冒着描述显而易见的风险......在小屏幕上，当导航栏菜单被激活时，只有第一级项目可见，子项目被折叠。当轻触具有子项的项时，子项会展开并变为可见。它们也可以通过再次点击父级来折叠。

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

哪些引导代码/文件对这种行为负责？

我知道一些 css 和 javascript，但还不足以弄清楚这一点。

谢谢。

【参考方案1】：

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

查看this example的源代码以获取工作示例