如何拉伸Bootstrap導航欄的元素以利用整個寬度？

My custom Bootstrap navigation bar

這個導航欄的一些事實：

酒吧本身正好是620px寬的（頁面的寬度）
酒吧響應（摺疊斷點在640px）
酒吧的元素粘在一起（之間沒有空間）
酒吧有多語言支持（元素的寬度變化）

如何拉伸酒吧的元素，以利用整個寬度？剩下的空白空間應該分佈在酒吧的元素中。由於每個元素都有不同的寬度，這個寬度可能會因語言而異，所以我無法使用百分比。我想唯一的解決方案將是JavaScript。但是，我找不到任何例子...

<body> 
    <div id="page"> 
     <header id="header"> 
      <nav class="navbar navbar-default roboto normal" role="navigation"> 
       <div class="container-fluid"> 
        <div class="navbar-header"> 
         <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navigation-elements"> <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 class="collapse navbar-collapse" id="navigation-elements"> 
         <ul class="nav navbar-nav"> 
          <li class="active"><a href="#">START</a> 
          </li> 
          <li><a href="#">THESE</a> 
          </li> 
          <li><a href="#">ARE</a> 
          </li> 
          <li><a href="#">SOME</a> 
          </li> 
          <li><a href="#">ELEMENTS</a> 
          </li> 
          <li><a href="#">WITH</a> 
          </li> 
          <li><a href="#">DIFFERENT</a> 
          </li> 
          <li><a href="#">WIDTHS</a> 
          </li> 
         </ul> 
        </div> 
       </div> 
      </nav> 
      <div class="clear"></div> 
     </header> 
    </div> 
</body>

來源

2014-03-07 urg0tt

好，以顯示你的代碼http://jsfiddle.net – ram

這：[點擊我]（http://jsfiddle.net/zBM6D/3/）。當然，我已將代碼減少到導航欄。 – urg0tt

你可以使用CSS表顯示佈局分發您的導航項目。它well supported across browsers和簡單的實現：

.navbar-nav { 
    display:table; 
    width:100%; 
    margin: 0; 
} 
.navbar-nav > li { 
    float:none; 
    display:table-cell; 
    text-align:center; 
}

這使得100％，其母公司#header，而這又是通過#page寬度的限制，所以如果你需要它橫跨整個文檔的100％的寬度寬度，則需要將其移出#page或使#page變寬。

http://jsfiddle.net/zBM6D/5/

來源

2014-03-07 11:52:03 Moob

非常感謝你！ :-)這正是我想要的！但是你錯過了一些解釋：在代碼中你改變了「float：left;」到「浮動：無」。我迄今爲止所做的其他一切都已經嘗試過，但這件事情在我的嘗試中一直沒有。我幾乎放棄了所有的希望。謝謝！ – urg0tt

謝謝，這幫了我。 – mpak