Twitter Bootstrap 3具有不同圖標的導航欄切換按鈕

通過使用Twitter Bootstrap 3，我想爲移動設備創建一個附加的導航欄。Twitter Bootstrap 3具有不同圖標的導航欄切換按鈕

在導航欄中，我會在酒吧的每一面放置2個切換按鈕。左按鈕將具有經典的「三欄」圖標，右按鈕將具有不同的圖標。我想要右鍵在裏面有「.glyphicon .glyphicon-comment」。如果用戶點擊按鈕，它也會切換到第二個菜單。我可以切換到菜單，但圖標無法更改？

我不能把任何其他圖標放在右側切換按鈕？（我還需要「一些鏈接」文本在導航欄中爲中心）

小提琴：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>

來源

2013-10-07 trante

像這樣的事情？ http://jsfiddle.net/WPfe3/5/ –

SEE THE DEMO HERE

你忘了你的jsfiddle演示添加bootstrap-glyphicons.css。然後替換此

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

隨着

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

然後讓在中心的鏈接，您需要從a標籤刪除類navbar-brand。然後用div封裝你的鏈接，然後應用text-align:center和一些padding來獲得鏈接。

來源

2013-10-07 11:24:28

好吧，但似乎左右按鈕不是水平對齊的。左邊的一個比右邊的一個高。我通過更改css文件來檢查它：http://jsfiddle.net/mavent/7KdD4/1/此外，「某些文本」不與按鈕對齊。 – trante

另外，「一些鏈接」被粘貼到導航欄的頂部。不垂直對齊。添加「margin-top」沒有幫助。 – trante

在此處查看http://jsfiddle.net/7KdD4/4/ –

您可以通過更改圖標跨度達到這個目的，

相反的，

<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

來源

2013-10-07 11:30:49 devo

請注意，兩個按鈕不是垂直對齊的。 http://jsfiddle.net/mavent/3QWSM/1/ – trante

也加一些高度''.navbar-toggle {max} height：35px; }''http://jsfiddle.net/3QWSM/2/ – devo

'''' – devo

Twitter Bootstrap 3具有不同圖標的導航欄切換按鈕

回答

相關問題