Html 具有不同图标的 Twitter Bootstrap 3 导航栏切换按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19223159/
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
Twitter Bootstrap 3 navbar toggle button with different icon
提问by trante
By using Twitter Bootstrap 3, I want to create an additional navbar for mobile.
通过使用 Twitter Bootstrap 3，我想为移动设备创建一个额外的导航栏。
In navbar I will put 2 toggle buttons in each side of bar. Left button will have classical "three bar" icon, and right button will have a different icon inside. I want right button to have ".glyphicon .glyphicon-comment" inside it. If the user clicks the button it will also toggle for second menu. I can toggle for the menu but icon can't be changed ?
在导航栏中，我将在栏的每一侧放置 2 个切换按钮。左键会有经典的“三栏”图标，右键会有不同的图标。我希望右键有“ .glyphicon .glyphicon-comment”在里面。如果用户点击按钮，它也会切换到第二个菜单。我可以切换菜单但不能更改图标？
I couldn't put any other icon inside right toggle button ? (I also need the "some link" text to be centered in navbar)
我不能在右切换按钮内放置任何其他图标？（我还需要“一些链接”文本在导航栏中居中）
Fiddle: http://jsfiddle.net/mavent/WPfe3/2/
小提琴：http: //jsfiddle.net/maven/WPfe3/2/
<nav class="navbar navbar-inverse navbar-fixed-top visible-xs" role="navigation" id="">
<div class="navbar-header">
<button type="button" class="navbar-toggle pull-left" data-toggle="collapse" data-target=".navbar-ex1-collapse"> <span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<button type="button" class="navbar-toggle pull-right" data-toggle="collapse" data-target=".navbar-ex2-collapse"> <span class="sr-only">Toggle navigation</span>
<i class="icon-user"></i>
</button>
<a class="navbar-brand" style="text-align:center;" href="">Some link here centered</a>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<li class="active">
<a href="#">AAAA 1</a>
</li>
<li class="active">
<a href="#">AAAA 2</a>
</li>
<li class="active">
<a href="#">AAAA 3</a>
</li>
</div>
<div class="collapse navbar-collapse navbar-ex2-collapse">
<li class="active">
<a href="#">BBBB 1</a>
</li>
<li class="active">
<a href="#">BBBB 2</a>
</li>
<li class="active">
<a href="#">BBBB 3</a>
</li>
</div>
</nav>
采纳答案by Vikas Ghodke
You forget to add bootstrap-glyphicons.cssin your jsfiddle demo.
Then Replace this
您忘记添加bootstrap-glyphicons.cssjsfiddle 演示。然后替换这个
<i class="icon-user"></i>
With
和
<i class="glyphicon glyphicon-comment" style="color:#fff"></i>
And then to get your link in center you need to remove the class navbar-brandfrom your atag. And then wrap your link with div and then apply text-align:centerand some paddingto get the link in center.
然后为了让您的链接居中，您需要navbar-brand从a标签中删除该类。然后用 div 包裹你的链接，然后应用text-align:center和一些padding以获得中心的链接。
