Центрирование пунктов меню с помощью boostrap navbar

Question

У меня есть простой липкий навигатор, который я пытаюсь поместить элементы меню слева, в центре и вправо. Я нашел документацию по загрузке с навигационной панелью справа и навигационной панелью слева. Оба они отлично работают, однако, если я хочу, чтобы что-то было посередине, я не могу найти термин/переменную в библиотеке начальной загрузки, которая это делает. Я также попытался добавить align = "center" в li и теги. Есть ли что-то конкретное, что я могу вызвать в пункты меню центра в bootstrap nav, или мне нужно редактировать вручную с помощью css align?

<!-- 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-center на navbar-nav, который вы хотите центрировать.

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

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

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

JSFiddle Here