Bootstrap導航對齊堆棧li

我想知道當我使用導航對齊時，什麼導致li元素彼此堆疊。Bootstrap導航對齊堆棧li

我看過IE老版本存在問題，但我正在測試一個新版本的Chrome。

<div id="header" class="row"> 
    <div id="backgroundImage" class="pagebg"></div> 
    <div id="nav" class="navbar navbar-default navbar-fixed-top" role="navigation">      
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#collapse"> 
     <span class="sr-only">toggle Navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
    </div> 
    <div id="collapse" class="collapse navbar-collapse"> 
     <ul class="nav navbar-nav nav-justified"> 
     <li><a href="#" class="active">Home</a></li> 
     <li><a href="#">News</a></li> 
     <li><a href="#">Forum</a></li> 
     <li><a href="#">Support</a></li> 
     </ul> 
    </div> 
</div>

這是我第一個真正的Bootstrap網站，我知道還有很多東西需要學習。 Bootstrap Doc中沒有提到這個問題。

是否可以重寫它？

我讀過使用導航對齊方式時Safari瀏覽器中存在一個錯誤。使用導航對齊是不是一個好主意？我應該使用CSS來操縱文本嗎？還是有一個簡單的解釋，爲什麼是一起竊聽和堆疊的一切？

謝謝你在先進

來源

2015-10-12 Metalbreath

根據文檔Justified

輕鬆製作凸片或丸劑在屏幕其父的相等的寬度比與768px .nav對齊更寬。在較小的屏幕上，nav 鏈接堆疊。

如果沒有進一步的CSS調教下，nav-justified只適用於nav-pills和nav-tabs，請嘗試更改navbar-nav到選項卡或藥丸。

看到http://jsfiddle.net/x3yz13c5/5/

如果你堅持使用navbar-nav嘗試像

.navbar-nav > li { 
    float: none; 
}

類似的線程可以在這裏看到How to justify navbar-nav in Bootstrap 3

來源

2015-10-12 11:53:18 kolunar

從<ul>元素刪除navbar-nav類中

<div id="collapse" class="collapse navbar-collapse">...</div>

如果設置，下面的CSS規則應用到您的<li>元素：

@media (min-width: 768px) 
    .navbar-nav > li { 
     float: left; 
    } 
}

的float: left導致「堆疊」效應。

來源

2015-10-12 11:44:17

如果這確實是解決方案，OP應該只是打開瀏覽器檢查和花五秒鐘時間來檢查這一點，因爲很容易發現哪些樣式適用於每個元素。 – klaar

Bootstrap導航對齊堆棧li

回答

相關問題