css - logo - Centrar el contenido de la barra de navegación en Bootstrap 4(alpha 5)

navbar bootstrap

Question

Estoy intentando centrar el contenido de la barra de navegación en Bootstrap 4, alpha 5. He estado buscando en Google un poco, y creo que podría haber algún truco relacionado con d-block y mx-auto .

Sin embargo, no puedo encontrar la forma de centrar los enlaces de navegación para que sean totales en el centro, no solo agregando un contenedor a su alrededor.

Ejemplo de código de barra de navegación con el que estoy jugando:

<nav class="navbar navbar-light bg-faded">
<ul class="nav navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown link
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</nav>

JSFiddle si te gusta

Answer 1

Puede agregar este código a su archivo css.

.nav{
text-align: center;
}
.navbar-nav .nav-item{
float: inherit;
display: inline-block;
}

Answer 2

Centrar los elementos de Navbar es más simple en Bootstrap 4 alpha 6, y no requiere marcado adicional.

<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
<ul class="navbar-nav mx-auto">
<li class="nav-item active text-center">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item text-center">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item text-center">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item dropdown text-center">
<a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown link
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</nav>

Bootstrap 4 Center Navbar Demo (actualizado para Beta)

Si necesita centrar solo elementos específicos, como la Marca o los Enlaces, vea esta respuesta