引導ul導航浮動權，但從左到右

Question

我想編碼與9（不要笑我的客戶請）按鈕的引導程序導航結構。

我想要其他4個頂部的前5個按鈕，右對齊。問題是，當我將它們對齊到右側時，按鈕順序顛倒。我通過創建兩個不同的列表來解決這個問題，但是當使屏幕變小時，這會使其反轉。我認爲應該有一個簡單的解決方案，但我找不到它。您可以看到一個例子：http://www.sanderfish.nl/haptokuijpers/index.html

這裏是我的HTML：

<div class="navbar navbar-inverse navbar-static-top"> 
     <div class="container"> 
     <div class="navbar-left navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      </button> 
      <a class="navbar-brand" href="index.html"><img src="assets/img/logo.png"</a> 
     </div> 
     <div class="navbar-collapse collapse"> 
      <ul class="nav navbar-nav navbar-right"> 
      <li><a href="index.html">Home</a></li> 
      <li><a href="voor-wie.html">Voor wie</a></li> 
      <li><a href="psychosomatiek.html">Psychosomatiek</a></li> 
      <li><a href="haptotherapie.html">Haptotherapie</a></li> 
      <li><a href="diana-kuijpers.html">Diana Kuijpers</a></li> 
      <li><a href="vergoeding.html">Vergoeding</a></li> 
      <li><a href="klachtenlijsten.html">Klachtenlijsten</a></li> 
      <li><a href="uitgeverij-vib.html">Uitgeverij VIB</a></li> 
      <li><a href="contact.html">Contact</a></li> 
      </ul> 
     </div><!--/.nav-collapse --> 
     </div> 
    </div> 

這是CSS：

@media (min-width: 768px) { 

.navbar-nav { 
    float: right; 
    margin: 0; 
    text-align: right; 
} 
.navbar-nav > li { 
    float: left; 
    text-align: right; 
} 
.navbar-nav > li > a { 
    padding-top: 20px; 
    padding-bottom: 10px; 
    display: block; 
    text-align: right; 
} 
.navbar-nav.navbar-right:last-child { 
    margin-right: 0px; 
    text-align: right; 
} 
} 

@media (min-width: 768px) { 
.navbar-left { 
    float: left !important; 
} 
.navbar-right { 
    float: right !important; 
    padding-right: 34px; 
    text-align: right; 
    max-width: 750px; 
} 
} 

提前感謝！

Answer 1

你不需要任何自定義CSS，只是鏈接兩個塊分解爲單獨的navbar-navs，和一個你想要的做navbar-right向右：DEMO：http://www.bootply.com/X0kDjEwnga

<div class="navbar-collapse collapse"> 
     <ul class="nav navbar-nav"> 
     <li><a href="index.html">Home</a></li> 
     <li><a href="voor-wie.html">Voor wie</a></li> 
     <li><a href="psychosomatiek.html">Psychosomatiek</a></li> 
     <li><a href="haptotherapie.html">Haptotherapie</a></li> 
     <li><a href="diana-kuijpers.html">Diana Kuijpers</a></li> 
     </ul> 
     <ul class="nav navbar-nav navbar-right"> 
     <li><a href="vergoeding.html">Vergoeding</a></li> 
     <li><a href="klachtenlijsten.html">Klachtenlijsten</a></li> 
     <li><a href="uitgeverij-vib.html">Uitgeverij VIB</a></li> 
     <li><a href="contact.html">Contact</a></li> 
     </ul> 
    </div><!--/.nav-collapse --> 

您可能需要解決時，在特定的-之間的寬度，但這是另一個故事，它們的重疊。

Answer 2

我不明白你爲什麼要這樣做，因爲你不僅覆蓋Bootstrap，而且完全覆蓋了響應式設計的概念，但你會知道的。不管怎麼說，只需更改這一部分：

.navbar-inverse .navbar-nav > li > a { 
    color: #FFF; 
    float: right; 
} 

到

.navbar-inverse .navbar-nav > li > a { 
    color: #FFF; 
    float: left; 
}