twitter-bootstrap Bootstrap 两个导航栏折叠
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20699940/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap two navbars collapsing
提问by JeffreyR
In bootstrap i want to have two navbars below eachother. My idea: Navbar 1 has a brand: main menu. Navbar 2 (below navbar1) has a brand called: sub menu.
在引导程序中，我希望在彼此下方有两个导航栏。我的想法：Navbar 1 有一个品牌：主菜单。导航栏 2（在导航栏 1 下方）有一个名为：子菜单的品牌。
When the user looks at the site on his mobile phone he/she sees two collapsible navbars. The user can now choose wich navbar to open. The menu or the sub menu.
当用户在他/她的手机上查看网站时，他/她会看到两个可折叠的导航栏。用户现在可以选择打开哪个导航栏。菜单或子菜单。
I just copied the standard code on the bootstrap website: http://getbootstrap.com/components/#navbar
我只是复制了引导程序网站上的标准代码：http: //getbootstrap.com/components/#navbar
Strange thing is. When i make my browser small. Two collapsed navbars appear. "Main-menu" and "sub-menu". When i click on the butten behind main menu the main menu appears. Just like it should. But when i press the sub-menu (uncollapse) button. The MAIN-MENU opens again. Not the sub menu.
奇怪的是。当我使浏览器变小时。出现两个折叠的导航栏。“主菜单”和“子菜单”。当我点击主菜单后面的按钮时，主菜单出现。就像它应该的那样。但是当我按下子菜单（展开）按钮时。主菜单再次打开。不是子菜单。
I just used the standard navbar code from the bootstrap website in the link pasted those beneath eachoter and changed the brand names. HERE is the bootply: http://bootply.com/101690Test it on mobile and see what happens in the navbars.
我只是在链接中使用了引导程序网站中的标准导航栏代码，将这些代码粘贴到了eachoter 下方并更改了品牌名称。这是 bootply：http://bootply.com/101690 在移动设备上测试它，看看在导航栏中会发生什么。
回答by Getz
You use the same id value for both navbar, change the id for the second navbar and the corresponding data-target value:
您对两个导航栏使用相同的 id 值，更改第二个导航栏的 id 和相应的数据目标值：
<nav class="navbar navbar-default" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">MAIN menu</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">MAIN menu link1</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
<nav class="navbar navbar-default" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Sub menu</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Sub menu link1</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
