使用boostrap導航欄居中菜單項

我有一個簡單的粘滯導航欄，我試圖將菜單項放在左側，中間和右側。我找到了navbar-right和navbar-left的bootstrap文檔。這兩種工作都很好，但是如果我想要中間的東西，我無法在bootstrap庫中找到一個能夠做到這一點的術語/變量。我也嘗試在li和a標籤中添加align =「center」。有什麼具體的我可以打電話給中心菜單項在引導程序導航，或者我必須手動編輯與CSS對齊？使用boostrap導航欄居中菜單項

<!-- Fixed navbar --> 
<nav class="navbar navbar-default navbar-fixed-top"> 
    <div class="container"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand" href="#"> pushed left by default? </a> 
    </div> 
    <div id="navbar" class="navbar-collapse collapse"> 
     <ul class="nav navbar-nav navbar" align="center"> 
     <li class="active"><a href="#">pushed left by default?</a></li> 
     <li><a href="#">center this part </a></li> 
     <li><a href="#">and this too </a></li> 
     </ul> 
     <ul class="nav navbar-nav navbar-right"> 
     <li><a href="#">right </a></li> 
     <li><a href="#"> right</a></li> 
     </ul> 
    </div><!--/.nav-collapse --> 
    </div> 
</nav>

來源

2016-03-03 Ben Casalino

我張貼此鏈接爲重複 - Center content in responsive bootstrap navbar，但意識到答案不navbar-right正常工作。

嘗試在navbar-nav上創建/添加navbar-center類，您希望居中。再次

.navbar-center { 
    display: inline-block; 
    float: none; 
} 

.navbar .navbar-collapse { 
    text-align: center; 
}

JSFiddle Here

來源

2016-03-03 21:00:30 Tricky12

是的，這正是我期待的，驚訝沒有這個多文檔，感謝：

<ul class="nav navbar-nav navbar-center" align="center"> <li class="active"><a href="#">pushed left by default?</a></li> <li><a href="#">center this part </a></li> <li><a href="#">and this too </a></li> </ul>

然後添加以下CSS！ –

@BenjaminCasalino我同意。對Bootstrap的創建者來說，愚蠢的是，有一個'navbar-left'和'navbar-right'，但沒有'navbar-center'。沒有問題！ – Tricky12

使用boostrap導航欄居中菜單項

回答

相關問題