html - ejemplos - ¿Cómo centrar elementos de navegación en Bootstrap?
navbar bootstrap ejemplos (3)
Puedes usar este CSS:
#navbarNavAltMarkup {
position: absolute;
text-align: center;
}
#navbarNavAltMarkup > div {
display: inline-block;
width: 100%;
}
#navbarNavAltMarkup > div > a {
display: inline;
}
Hace que el contenedor del menú sea independiente de su padre, le da ancho completo y alinea los elementos dentro de él en el centro.
Esta pregunta ya tiene una respuesta aquí:
¿Qué sucede si quiero centrar los elementos de navegación (enlaces) en la barra de navegación de acuerdo con el tamaño de la ventana del navegador en Bootstrap 4. Eche un vistazo al código:
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Navbar</a>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#">Features</a>
<a class="nav-item nav-link" href="#">Pricing</a>
<a class="nav-item nav-link disabled" href="#">Disabled</a>
</div>
</div>
</nav>
Ahora quiero centrar el div "navbar-nav" de acuerdo con el ancho del navegador. Una cosa que he intentado es darle mr-auto y ml-auto que parece centrarlo pero no exactamente. Lo que realmente hace lo centra según el ancho "ancho de la ventana del navegador - ancho del logotipo". Lo quiero centrado exactamente en el medio de la pantalla.
Intenté cambiar la posición a absoluta también, pero nuevamente ese tipo de diseño desordenado también se colapsó.
Utilice las utilidades flexbox y margin con capacidad de respuesta ...
Bootstrap 4 alpha 6 http://codeply.com/go/YvzHvQQRAs (marca central y enlaces)
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="d-md-flex d-block flex-row mx-md-auto mx-0">
<a class="navbar-brand" href="#">Navbar</a>
<div class="collapse navbar-collapse mr-auto" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#">Features</a>
<a class="nav-item nav-link" href="#">Pricing</a>
<a class="nav-item nav-link disabled" href="#">Disabled</a>
</div>
</div>
</div>
</nav>
Bootstrap 4.1 https://www.codeply.com/go/sTJUthyswN (marca central, alinear a la izquierda en el móvil)
EDITAR..
La respuesta sigue siendo básicamente la misma.
Use
mx-auto
para centrar.
http://codeply.com/go/mycC5z8lpJ (enlaces centrales, marca izquierda)
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Navbar</a>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav mx-auto">
<a class="nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
<a class="nav-link" href="#">Features</a>
<a class="nav-link" href="#">Pricing</a>
<a class="nav-link disabled" href="#">Disabled</a>
</div>
</div>
</nav>
Si desea que los enlaces estén exactamente centrados en la ventana gráfica, consulte el segundo ejemplo aquí: http://www.codeply.com/go/RCBftzZCD8
Otros ejemplos de alineación de la barra de navegación de Bootstrap 4
Ver también ...
Centrar un elemento en Bootstrap 4 Navbar
¿Centrar los enlaces de la barra de navegación sin que la marca lo empuje hacia la derecha en Bootstrap 4?
Cómo centrar la barra de navegación en Bootstrap 4 usando Flexbox
Cómo colocar el contenido de la barra de navegación en Bootstrap 4
Bootstrap 4 Navbar alinea el centro del logotipo y el ícono de alternar a la izquierda
.navbar-nav .nav-link,
.navbar-brand {
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Navbar</a>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#">Features</a>
<a class="nav-item nav-link" href="#">Pricing</a>
<a class="nav-item nav-link disabled" href="#">Disabled</a>
</div>
</div>
</nav>