twitter-bootstrap Bootstrap 3.0 导航栏中的多个折叠按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18821238/
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
Multiple Collapse buttons in navbar with Bootstrap 3.0
提问by Martín
I'm using Bootstrap 3.0 to show a navbar with some links and a search field. When i go to "mobile version" i have a button that collapses the navbar and show all the content: the links and the search field. Now I need two buttons, one to collapse only the links of the navbar and the other button to collapse only the search field. How can i make this?
我正在使用 Bootstrap 3.0 来显示带有一些链接和搜索字段的导航栏。当我转到“移动版本”时，我有一个按钮可以折叠导航栏并显示所有内容：链接和搜索字段。现在我需要两个按钮，一个只折叠导航栏的链接，另一个按钮只折叠搜索字段。我怎样才能做到这一点？
回答by koala_dev
Separate the links and the search form into two navbar-collapseelements and have each button target the corresponding one:
将链接和搜索表单分成两个navbar-collapse元素，并让每个按钮定位对应的一个：
Sample markup:
示例标记：
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#search">Toggle search</button>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#links">Toggle links</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<ul class="collapse navbar-collapse nav navbar-nav" id="links">
<!--Links go here-->
</ul>
<div class="collapse navbar-collapse" id="search">
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</nav>
You would then just need to fix some conflicting styles between .navbar-navand .navbar-collapseby adding this to your CSS:
然后你只需要修正之间的一些冲突的风格.navbar-nav，并.navbar-collapse加入给你的CSS：
@media (max-width:767px) {
.navbar-nav.navbar-collapse {
margin-left: 0;
margin-right: 0;
padding-left: 0;
padding-right: 0;
}
}
Here's a demo fiddle
这是一个演示小提琴
