html - example - Bootstrap NavBar con elementos alineados a la izquierda, al centro o a la derecha

navbar bootstrap ejemplos (7)

En Bootstrap , ¿cuál es la forma más sencilla de crear una barra de navegación con el Logo A a la izquierda, los elementos del menú en el centro y el Logo B a la derecha?

Esto es lo que he intentado hasta ahora, y termina siendo alineado de modo que el Logo A está a la izquierda, los elementos del menú al lado del logo a la izquierda y el Logo B a la derecha.

Bootstrap 4 (a partir de alfa 6)

¡Las barras de navegación se construyen con flexbox! En lugar de flotadores, necesitarás las utilidades flexbox y margin.

Para el uso correcto de Align Right justify-content-end en la división de collapse :

<div class="collapse navbar-collapse justify-content-end"> <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="#">Home</a> </li> </ul> </div>

Ejemplo completo aquí: https://jsbin.com/kemawa/edit?output

Dame una bofetada, solo vuelve a leer mi respuesta y me di cuenta de que el OP estaba pidiendo dos logotipos, uno en la izquierda a la derecha con un menú central, no al revés.

Esto se puede lograr estrictamente en el HTML usando "navbar-right" y "navbar-left" de Bootstrap para los logotipos y luego "nav-justified" en lugar de "navbar-nav" para su UL. No se necesita un CSS adicional (a menos que desee colocar la barra de navegación y contraer cola en el centro en la ventana gráfica xs, entonces necesita anular un poco, pero se lo dejará a usted).

Bootply: http://www.bootply.com/W6uB8YfKxm

Para aquellos que llegaron aquí tratando de centrar la "marca" aquí está mi antigua respuesta:

Sé que este hilo es un poco viejo, pero solo para publicar mis hallazgos cuando trabaje en esto. Decidí basar mi solución en la respuesta de skelly desde que tomaszbak se rompe en collaspe. Primero creé mi "navbar-center" y apagué el flotador para la barra de navegación normal en mi CSS:

.navbar-center { position: absolute; width: 100%; left: 0; text-align: center; margin: auto; } .navbar-brand{ float:none; }

Sin embargo, el problema con la respuesta de skelly es que si tiene una marca realmente larga (o si desea usar una imagen para su marca), una vez que llegue a la ventana de sm, podría haber superposición debido a la posición absoluta y, como han comentado los comentaristas. dicho, una vez que llegas a la xs viewport, el interruptor de conmutación se rompe (a menos que uses la posición Z pero realmente no quería tener que preocuparme por eso).

Entonces, lo que hice fue utilizar las utilidades de bootstrap responsive para crear múltiples versiones del bloque de marca:

<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 class="navbar-brand visible-xs"><a href="#">Brand That is Really Long</a></div> </div> <div class="navbar-brand visible-sm text-center"><a href="#">Brand That is Really Long</a></div> <div class="navbar-brand navbar-center hidden-xs hidden-sm"><a href="#">Brand That is Really Long</a></div> <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> <li><a href="#">Left</a></li> <li><a href="#about">Left</a></li> <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> <li><a href="#about">Right</a></li> <li><a href="#contact">Right</a></li> <li><a href="#about">Right</a></li> <li><a href="#contact">Right</a></li> </ul> </div>

Así que ahora, las vistas de lg y md tienen la marca centrada con los enlaces a la izquierda y la derecha, una vez que llegue a la vista de sm, sus enlaces pasarán a la siguiente línea para no superponerse con su marca y, finalmente, en la xs En el viewport se activa el collaspe y puede utilizar el conmutador. Podría llevar esto un paso más allá y modificar las consultas de medios para la barra de navegación a la derecha y la barra de navegación a la izquierda cuando se usa con la marca de la barra de navegación para que en la vista de sm todos los enlaces estén centrados pero no tengan tiempo para revisarlos.

Puede consultar mi antiguo bootply aquí: www.bootply.com/n3PXXropP3

Supongo que tener 3 marcas puede ser tan complicado como la "z" pero siento que en el mundo del diseño responsivo esta solución se adapta mejor a mi estilo.

Descubrí que la siguiente era una mejor solución según el contenido de los elementos izquierdo, central y derecho. Un ancho de 100% sin margen causó la superposición de divs y evitó que las etiquetas de anclaje funcionen correctamente, es decir, sin el desordenado uso de los índices z.

.navbar-brand { position: absolute; width: 100%; left: 0; margin: auto; margin-left: 48%; }

Esta es una pregunta con fecha, pero encontré una solución alternativa para compartir directamente desde la página de github de bootstrap. La documentación no se ha actualizado y hay otras preguntas sobre SO que solicitan la misma solución aunque en preguntas ligeramente diferentes. Esta solución no es específica para su caso, pero como puede ver, la solución es <div class="container"> justo después de <nav class="navbar navbar-default navbar-fixed-top"> pero también puede reemplazarse por <div class="container-fluid" según sea necesario.

<!DOCTYPE html> <html> <head> <title>Navbar right padding broken </title> <script src="//code.jquery.com/jquery-2.1.4.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" /> </head> <body> <nav class="navbar navbar-default navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a href="#/" class="navbar-brand">Hello</a> </div> <div class="collapse navbar-collapse navbar-ex1-collapse"> <ul class="nav navbar-nav navbar-right"> <li> <div class="btn-group navbar-btn" role="group" aria-label="..."> <button type="button" class="btn btn-default" data-toggle="modal" data-target="#modalLogin">Se connecter</button> <button type="button" class="btn btn-default" data-toggle="modal" data-target="#modalSignin">Créer un compte</button> </div> </li> </ul> </div> </div> </nav> </body> </html>

La solución se encontró en un violín en esta página: https://github.com/twbs/bootstrap/issues/18362

y está listado como no solucionado en V3.

La solución más simple:

Solo divide la navbar en columnas: por ejemplo, si tienes 24 columnas en total, 12 van a estar vacías y 12 van a estar en contra de la barra de navegación:

<nav class="navbar navbar-default"> <div class="row"> <div class="col-sm-4"></div> <div class="col-sm-4"></div> <div class="col-sm-4"></div> <div class="col-sm-12"> <ul class="nav navbar-nav" align="center"> <li><a href="#">Home</a></li> <li><a href="#">First Link</a></li> <li><a href="#">Second Link</a></li> <li><a href="#">Third Link</a></li> <li><a href="#">Fourth Link</a></li> </ul> </div> </div> </nav>

Necesitaba algo similar (izquierda, centro y elementos alineados a la derecha), pero con la capacidad de marcar los elementos centrados como activos. Lo que funcionó para mí fue:

http://www.bootply.com/CSI2KcCoEM

CSS:

@media (min-width: 768px) { .navbar-nav { width: 100%; text-align: center; } .navbar-nav > li { float: none; display: inline-block; } .navbar-nav > li.navbar-right { float: right !important; } }

Actualización 2018

Bootstrap 4

Ahora que Bootstrap 4 tiene flexbox, la alineación de la barra de navegación es mucho más fácil. Aquí hay ejemplos actualizados de izquierda , derecha y centro en la barra de navegación de Bootstrap 4 , y muchos otros escenarios de alineación que se muestran aquí .

Las clases de utilidad flexbox , auto-margins y ordering se pueden usar para alinear el contenido de la barra de navegación según sea necesario. Hay muchas cosas a considerar, incluyendo el orden y la alineación de los elementos de la barra de navegación (marca, enlaces, alternador) en las pantallas grandes y en las vistas móviles / colapsadas. Aquí hay varios ejemplos ...

Izquierda, centro (marca) y enlaces a la derecha:

<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

Otra opción de BS4 Navbar con enlaces centrales e imagen de logotipo de superposición :

O , marca izquierda, enlaces centro muerto, (derecha vacía)

O bien , marca y centro de enlaces, iconos de izquierda y derecha.

Ver también: Bootstrap 4 alinea los elementos de la barra de navegación a la derecha

Bootstrap 3

Opción 1 - Centro de marca, con enlaces de navegación izquierda / derecha:

http://bootply.com/98314

Opción 2 - Enlaces de navegación izquierdo, central y derecho:

http://www.bootply.com/SGYC6BWeBK

Opción 3 - Centrar tanto la marca como los enlaces.

.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

Más ejemplos:

Marca izquierda, enlaces centro.
Alternador izquierdo, marca central

Para 3.x también vea nav-justified: Bootstrap center navbar

Centro Navbar en Bootstrap
Bootstrap 4 alinea los elementos de la barra de navegación a la derecha