使用Bootstrap導航欄作爲不折疊的固定頂部欄杆

Question

我正在嘗試做一件簡單的事情：左側有一個品牌名稱和右側有兩個圖標的頂部欄（如固定導航欄）。我正在開發移動設備，因此我不希望它在小屏幕上進行更改（像缺省情況下，導航欄一樣會崩潰）。

我對Bootstrap比較新，所以我想我做錯了什麼。

爲了防止崩潰，我把所有東西放在navbar-header div。我創建了一個<span class="pull-right">以將圖標右移，但我無法讓它們正確呈現。

（我懷疑，如果這重要的，但我使用引導3.0.x的）

這是我目前有：http://jsfiddle.net/rd73tecL/2/

Answer 1

嘗試使用下面的CSS禁用崩潰效果（如這裏提到：Bootstrap 3 - disable navbar collapse）：

.navbar-collapse.collapse { 
    display: block !important; 
} 

.navbar-nav>li, .navbar-nav { 
    float: left !important; 
} 

.navbar-nav.navbar-right:last-child { 
    margin-right: -15px !important; 
} 

.navbar-right { 
    float: right !important; 
} 

我不確定你的權利是什麼意思由2個圖標：在導航欄的標誌或右的直接吧？如果是後一種情況，可以將導航欄鏈接放入div中，並添加右拉類將其放在導航欄的右側。您還需要將display: inline-block !important;添加到導航欄徽標的css中，如圖所示JSfiddle

希望有所幫助。

Answer 2

嘗試使用此代碼：

 <nav class="navbar navbar-default navbar-fixed-top"> 
      <div class="container"> 
       <div class="navbar-header"> 
       <a class="navbar-brand" href="#">Fibe</a> 
       <span class="navbar-right pull-right"> 
        <ul class="navbar-nav nav"> 
        <li class="navbar-link"><span class="glyphicon glyphicon-search"></span></li> 
        <li class="navbar-link"><span class="glyphicon glyphicon-star"></span></li> 
        </ul> 
       </span> 
       </div> 
      </div> 
     </nav> 

只是修正

<span class="navbar-right"> with <span class="navbar-right pull-right"> 

希望這有助於。