Bootstrap 3如何不在較小的視口中堆疊導航對齊

我有一個引導程序導航，我需要避免堆疊它在較小的視口，以便它保持水平，不堆疊。Bootstrap 3如何不在較小的視口中堆疊導航對齊

下面是一個例子

HTML：

<div class="menuBar"> 
    <ul class="nav nav-justified"> 
     <li> 
      <a href="#" class="menuItem"> 
       <i class="glyphicon glyphicon-asterisk"></i> 
      </a> 
     </li> 
     <li> 
      <a href="#" class="menuItem"> 
       <i class="glyphicon glyphicon-asterisk"></i> 
      </a> 
     </li> 
     <li> 
      <a href="#" class="menuItem"> 
       <i class="glyphicon glyphicon-asterisk"></i> 
      </a> 
     </li> 
    </ul> 
</div>

CSS：

.menuBar ul { 
    text-align: justify; 
} 
.menuBar ul li a { 
    display: inline-block; 
} 
.menuItem { 
    font-size: 24px; 
}

擴展版本：http://jsfiddle.net/m5k93rwo/

什麼是做到這一點的最好方法是什麼？我懷疑有數據觸發一些遊戲，但不幸的是，我沒有足夠的經驗，以確保如何使它運作良好

來源

2014-09-23 nagafono

也許這個問題的答案問題可以幫助你：http://stackoverflow.com/questions/23535289/bootstrap-3-disable-navbar-collapse – ChaoticNadirs 2014-09-23 10:57:22

你不玩數據切換，它與它無關。如果我明白，你不需要移動導航？你不想崩潰，因爲理由-NAV在崩潰中看起來很奇怪，因爲它不打算去那裏？ – Christina 2014-09-23 12:13:10

不管你不想崩潰不要放在一個.collapse – Christina 2014-09-23 12:14:37

添加這個CSS所有其他的CSS後：

.nav-justified > li { 
    display: table-cell; 
    width: 1%; 
    } 
    .nav-justified > li > a { 
    margin-bottom: 0; 
    }

來源

2014-09-23 21:25:22 Christina

thx很多，這是我尋找的解決方案！ – nagafono 2014-09-24 09:52:35

這不會標準化邊界（堆疊的標籤明顯具有與水平對齊的標籤不同的邊框）。 – 2015-05-27 21:38:31

Bootstrap 3如何不在較小的視口中堆疊導航對齊

回答

相關問題