twitter-bootstrap 如何创建另一个引导折叠导航栏按钮？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23323610/
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
How to create another bootstrap collapse navbar button?
提问by RubyNoobie
I am trying to create a fixed navbar top similar to Udemy using bootstrap 3. This contains a left aligned collapsible drop down. But copying navbar-headertwice didn't work. CSS is not my strong point. Any direction is appreciated.
我正在尝试使用 bootstrap 3 创建一个类似于 Udemy 的固定导航栏顶部。它包含一个左对齐的可折叠下拉菜单。但是复制navbar-header两次没有用。CSS 不是我的强项。任何方向表示赞赏。
Collapsed one on left and one on the right.
左侧折叠了一个，右侧折叠了一个。
Update
更新
This is what I have so far. I would like the button group items to adopt the default behaviour of bootstrap (with icon-bar) on the left most corner of navbar when resized for smaller displays.
这就是我迄今为止所拥有的。我希望按钮组项目在为较小的显示器调整大小时采用导航栏最左角的引导程序（带有图标栏）的默认行为。
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<header class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<div class="btn-group header-dropdown nav navbar-nav">
<button type="button" class="btn btn-success">Select City</button>
<button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Chennai</a></li>
<li><a href="#">Bangalore</a></li>
<li><a href="#">Mumbai</a></li>
<li class="divider"></li>
<li><a href="#">Others</a></li>
</ul>
</div>
</li>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
</ul>
</div>
</header>
</nav>
回答by Zim
You can use a dropdownto create the "Discover" menu, and some custom CSS to center the brand. The links on the right would toggle/collapse on small screens using the navbar-collapse..
您可以使用 adropdown创建“发现”菜单，并使用一些自定义 CSS 来使品牌居中。右侧的链接将使用navbar-collapse..在小屏幕上切换/折叠。
Working demo:http://bootply.com/133215
工作演示：http : //bootply.com/133215
回答by isherwood
Since you haven't provided any code, it's difficult to determine what's going wrong with your project. Your dropdown should look something like this, probably inserted just before the other navbar elements:
由于您尚未提供任何代码，因此很难确定您的项目出了什么问题。您的下拉列表应该是这样的，可能就在其他导航栏元素之前插入：
<div class="btn-group pull-left">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span class="sr-only">Button text</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
