如何：非摺疊導航項Bootstrap 3

Question

我已經在SO上搜索了高和低，但沒有找到「正確」的答案。

就想通了自己..思來分享這一點，希望它可以幫助別人..

問題與BS3是，它是移動第一，這是一件好事，通常..這只是我需要一個不管崩潰狀態如何，導航欄中幾乎沒有「默認」選項。就像BS2一樣。

那麼我們該怎麼做呢？

Answer 1

有一點很明顯，看着html代碼，.navbar-header保持它在哪裏，它不崩潰。另一件事，魔術崩潰按鈕有一些隱藏自己的方式，可能CSS但嘿，這個想法是抽象這一層，所以我們不必擔心它..

但我們可以利用這一點，讓我們把我想要顯示的鏈接放在那裏，它們不會崩潰。

你會看到的是你的列表項目將垂直結束，這不是你想要的。那麼爲什麼它會這樣做呢？

那麼..如果你使用Firebug或其他開發檢查員，你會發現這些項目已被設置爲display : block;，這使他們的屏幕寬度推下每個下一個項目。

我們需要改變這種行爲。所以讓我們在ul中添加一個新類，我們可以在我們的自定義CSS中定義這個類。我把它命名爲no-collapse，但你可以將其命名爲任何你想要的..

<nav role="navigation" class="navbar navbar-default navbar-fixed-top"> 
    <div class="container-fluid"> 
    <div class="navbar-header"> 
     <button type="button" data-toggle="collapse" data-target="#bs-navbar-collapse" class="navbar-toggle"> 
      <span class="sr-only">Hamburger menu</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </button> 
     <a href="#" class="navbar-brand glyphicon glyphicon-home" title="Home"></a> 
     <!-- THIS IS WHERE THE MAGIC HAPPENS! --> 
     <ul class="nav navbar-nav no-collapse"> 
     <li><a href="#">Apple</a> 
     </li> 
     <li><a href="#">Banana</a> 
     </li> 
     </ul> 
    </div> 
    <!-- THE STUFF IN THIS DIV WILL COLLAPSE.. --> 
    <div id="bs-navbar-collapse" class="collapse navbar-collapse"> 
     <ul class="nav navbar-nav"> 
     <li class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">More Fruits <b class="caret"></b></a> 
      <ul class="dropdown-menu"> 
      <li class="dropdown-header">Citrus</li> 
      <li> 
       <a href="#">Lemon</a> 
      </li> 
      <li> 
       <a href="#">Orange</a> 
      </li> 
      <li class="divider"></li> 
      <li class="dropdown-header">  
       Also a fruit 
      </li> 
      <li> 
       <a href="#">Tomato</a> 
      </li> 
      </ul> 
     </li> 
     <li class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Veggies <b class="caret"></b></a> 
      <ul class="dropdown-menu"> 
      <li class="dropdown-header">Green stuff</li> 
      <li> 
       <a href="#">Spinache</a> 
      </li> 
      <li> 
       <a href="#">Lettuce</a> 
      </li> 
      <li class="divider"></li> 
      <li class="dropdown-header">Other stuff</li> 
      <li><a href="#">Carrot</a> 
      </li> 
      <li><a href="#">Romenesko broccoli</a> 
      </li> 
      </ul> 
     </li> 
     </ul> 
     <ul class="nav navbar-nav navbar-right"> 
     <li> 
      <a href="#">This works</a> 
     </li> 
     </ul> 
    </div> 
    </div> 
</nav> 

你需要修改，添加CSS（以下/ SASS）後引導樣式表。

添加這個CSS：

.no-collapse li, .no-collapse li a 
{ 
    text-align : center; 
    float  : none; 
    display  : inline-block; 
} 

現在Bootply它應該是這樣的：http://www.bootply.com/render/133885源位置：http://www.bootply.com/133885

現在我們可以有健康的蘋果和香蕉對我們的移動設備的屏幕，不上訴諸漢堡菜單！