Atualização de 2019
Bootstrap 4
Agora que o Bootstrap 4 possui flexbox, o alinhamento da Navbar é muito mais fácil. Aqui estão exemplos atualizados de esquerda , direita e centro na barra de navegação do Bootstrap 4 e muitos outros cenários de alinhamento demonstrados aqui .
As classes flexbox , margens automáticas e utilitário de pedidos podem ser usadas para alinhar o conteúdo da Navbar, conforme necessário. Há muitas coisas a considerar, incluindo a ordem e o alinhamento dos itens da Navbar (marca, links, alternador) nas telas grandes e nas visualizações móvel / recolhida. Não use as classes de grade (linha, coluna) para a barra de navegação .
Aqui estão vários exemplos ...
Links esquerdo, central (marca) e direito:
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<div class="navbar-collapse collapse w-100 order-1 order-md-0 dual-collapse2">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Left</a>
</li>
<li class="nav-item">
<a class="nav-link" href="//codeply.com">Codeply</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
<div class="mx-auto order-0">
<a class="navbar-brand mx-auto" href="#">Navbar 2</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".dual-collapse2">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="navbar-collapse collapse w-100 order-3 dual-collapse2">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">Right</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</nav>
http://www.codeply.com/go/qhaBrcWp3v
Outra opção BS4 Navbar com links centrais e sobreposição da imagem do logotipo :
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="navbar-collapse collapse w-100 dual-collapse2 order-1 order-md-0">
<ul class="navbar-nav ml-auto text-center">
<li class="nav-item active">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
<div class="mx-auto my-2 order-0 order-md-1 position-relative">
<a class="mx-auto" href="#">
<img src="//placehold.it/120/ccff00" class="rounded-circle">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".dual-collapse2">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="navbar-collapse collapse w-100 dual-collapse2 order-2 order-md-2">
<ul class="navbar-nav mr-auto text-center">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</nav>
Ou , esses outros cenários de alinhamento do Bootstrap 4:
marca esquerda, links do centro morto (vazio à direita)
marca e centro de links, ícones esquerdo e direito
Mais exemplos do Bootstrap 4 :
alternador deixado no celular, marca no centro da marca direita
e links no celular
direito alinhar links no computador, links centrais no celular
esquerdo links & alternador, marca central, pesquisa direita
Veja também: O Bootstrap 4 alinha os itens da barra de navegação à direita
barra de navegação do Bootstrap 4 alinha à direita com o botão que não diminui no celular
Centralize um elemento no Bootstrap 4 Navbar
Bootstrap 3
Opção 1 - Brand center, com links de navegação esquerdo / direito:
<nav class="navbar navbar-default" role="navigation">
<div class="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>
</div>
<a class="navbar-brand" href="#">Brand</a>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-left">
<li><a href="#">Left</a></li>
<li><a href="#about">Left</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#about">Right</a></li>
<li><a href="#contact">Right</a></li>
</ul>
</div>
</nav>
.navbar-brand
{
position: absolute;
width: 100%;
left: 0;
text-align: center;
margin:0 auto;
}
.navbar-toggle {
z-index:3;
}
http://bootply.com/98314 (3.x)
Opção 2 - Links de navegação esquerdo, central e direito:
<nav class="navbar navbar-default" role="navigation">
<div class="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>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="#">Left</a></li>
</ul>
<ul class="nav navbar-nav navbar-center">
<li><a href="#">Center</a></li>
<li><a href="#">Center</a></li>
<li><a href="#">Center</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Right</a></li>
</ul>
</div>
</nav>
@media (min-width: 768px) {
.navbar-nav.navbar-center {
position: absolute;
left: 50%;
transform: translatex(-50%);
}
}
http://www.bootply.com/SGYC6BWeBK
Opção 3 - Centralize a marca e os links
.navbar .navbar-header,
.navbar-collapse {
float:none;
display:inline-block;
vertical-align: top;
}
@media (max-width: 768px) {
.navbar-collapse {
display: block;
}
}
http://www.codeply.com/go/1lrdvNH9GI
Mais exemplos:
Marca esquerda, links centrais
Ligador esquerdo, marca central
Para 3.x, veja também justificado para a navegação: Bootstrap center navbar
Centralizar a barra de navegação no Bootstrap O
Bootstrap 4 alinha os itens da barra de navegação à direita