Question

如果我们有子菜单，那么它们默认是可见的，我们必须滚动和滚动。 Plz看看我想要什么，但它适用于Bootstrap的早期版本。我正在考虑2.1.1并且我认为它应该是Bootstrap的默认功能（他们在新版本中改变了很多东西）

Plz看看这里：

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

Answer 1

这使用最新版本的bootstrap。唯一的区别是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

Twitter Bootstrap：隐藏小屏幕中的子菜单

1 个答案: