twitter-bootstrap - Twitter Bootstrap：在小屏幕中隐藏子菜单

Question

如果我们有子菜单，那么它们默认是可见的，我们必须滚动和滚动。请看看我想要什么，但它适用于 Bootstrap 以前的版本。我正在研究 2.1.1，我相信它应该是 Bootstrap 中的默认功能（他们在新版本中改变了很多东西）

请看这里：

http://jsfiddle.net/nczJF/

我正在寻找这样的菜单行为，其中主菜单和子菜单仅通过单击相关子菜单出现。我搜索了很多，但所有这些都是针对 Bootstraps 以前的版本。所以有人有专家建议吗？

Answer 1

http://jsfiddle.net/nczJF/39/

这使用最新版本的引导程序。唯一不同的是CSS，JS是一样的。

在 bootstrap-responsive.css 中，从以下位置删除display: block（不要切换为不显示）：

.nav-collapse .dropdown-menu {
  position: static;
  top: auto;
  left: auto;
  float: none;
  display: block; /* remove this line! */
  max-width: none;
  padding: 0;
  margin: 0 15px;
  background-color: transparent;
  border: none;
  -webkit-border-radius: 0;
     -moz-border-radius: 0;
          border-radius: 0;
  -webkit-box-shadow: none;
     -moz-box-shadow: none;
          box-shadow: none;
}

在同一个文件的底部，更改height: 0为height: auto：

.nav-collapse,
.nav-collapse.collapse {
  height: auto; /* instead of 0 */
  overflow: hidden;
 }

然后，要修复默认展开视图，请更改您的 html. 将类添加collapsed到折叠按钮：

<button type="button" class="btn btn-navbar collapsed" data-toggle="collapse" data-target=".nav-collapse">

也改变

<div class="nav-collapse">

到

<div class="nav-collapse collapse" style="height: 0px; ">

编辑 JS 可能会更优雅，但这无需更改另一个文件即可工作。

我在这里推动此功能的集成：https ://github.com/twitter/bootstrap/issues/5606