使用boostrap导航栏居中菜单项

Question

我有一个简单的粘滞导航栏，我试图将菜单项放在左侧，中间和右侧。我找到了navbar-right和navbar-left的bootstrap文档。这两种工作都很好，但是如果我想要中间的东西，我无法在bootstrap库中找到一个能够做到这一点的术语/变量。我也尝试在li和a标签中添加align =“center”。有什么具体的我可以打电话给中心菜单项在引导程序导航，或者我必须手动编辑与CSS对齐？

<!-- 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> 

Answer 1

我张贴此链接为重复 - 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