如果我们有子菜单,那么它们默认是可见的,我们必须滚动和滚动。请看看我想要什么,但它适用于 Bootstrap 以前的版本。我正在研究 2.1.1,我相信它应该是 Bootstrap 中的默认功能(他们在新版本中改变了很多东西)
请看这里:
我正在寻找这样的菜单行为,其中主菜单和子菜单仅通过单击相关子菜单出现。我搜索了很多,但所有这些都是针对 Bootstraps 以前的版本。所以有人有专家建议吗?
如果我们有子菜单,那么它们默认是可见的,我们必须滚动和滚动。请看看我想要什么,但它适用于 Bootstrap 以前的版本。我正在研究 2.1.1,我相信它应该是 Bootstrap 中的默认功能(他们在新版本中改变了很多东西)
请看这里:
我正在寻找这样的菜单行为,其中主菜单和子菜单仅通过单击相关子菜单出现。我搜索了很多,但所有这些都是针对 Bootstraps 以前的版本。所以有人有专家建议吗?
这使用最新版本的引导程序。唯一不同的是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