Twitter Bootstrap 3 导航栏切换按钮，使用不同的图标

Question

使用Twitter Bootstrap 3，我想为移动设备创建一个额外的导航栏。在导航栏中，我将在每个侧面放置2个切换按钮。左侧按钮将有经典的“三条杠”图标，而右侧按钮将有一个不同的图标。我希望右侧按钮里面有“.glyphicon .glyphicon-comment”。如果用户单击该按钮，它也将切换到第二个菜单。我可以为菜单切换，但图标无法更改？我无法在正确的切换按钮内放置任何其他图标吗？（我还需要使“一些链接”文本居中于导航栏中）。

Fiddle: http://jsfiddle.net/mavent/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>

- trante

---

像这样的吗？http://jsfiddle.net/WPfe3/5/ - Vikas Ghodke

Answer 1

你可以通过更改图标 span 来实现这一点，

不要使用，

 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>

使用方式如下：

<span class="glyphicon glyphicon-play" style="color:#fff"></span>

Demo

- Anshad Vattapoyil

---

请注意，两个按钮没有垂直对齐。http://jsfiddle.net/mavent/3QWSM/1/ - trante

增加一些高度也可以 .navbar-toggle { max-height:35px; } http://jsfiddle.net/3QWSM/2/ - Anshad Vattapoyil

<span class="glyphicon glyphicon-play" style="color:#fff;margin-top:-5px"></span> - Anshad Vattapoyil

“Some text” 看起来水平居中不对？ - trante

Answer 2

点击此处查看演示

您在jsfiddle演示中忘记添加bootstrap-glyphicons.css文件。 然后替换掉这段内容。

<i class="icon-user"></i>

With

 <i class="glyphicon glyphicon-comment" style="color:#fff"></i>

然后，要使您的链接居中，您需要从标签中删除navbar-brand类。然后将您的链接用

包装起来，然后应用text-align:center和一些padding以使链接居中。

- Vikas Ghodke

---

好的，但是似乎左右按钮没有水平对齐。左边的比右边的高。我通过更改CSS文件来检查它：http://jsfiddle.net/mavent/7KdD4/1/ 另外，“一些文本”与按钮不对齐。 - trante

此外，“some linked”粘在导航栏顶部，但垂直未对齐。添加“margin-top”也没有帮助。 - trante