Bootstrap NavBar con elementos alineados a la izquierda, centro o derecha

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

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

 

Actualización 2018

Bootstrap 4

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

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

enter image description here

  

http://www.codeply.com/go/qhaBrcWp3v

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

Enlaces centrales e imagen del logotipo de superposición

  

O marque la izquierda, enlaces del centro muerto, (vacío a la derecha)

Marca Navbar izquierda, enlaces de centro muerto


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


Bootstrap 3

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

enter image description here

  .navbar-brand { position: absolute; width: 100%; left: 0; text-align: center; margin:0 auto; } .navbar-toggle { z-index:3; } 

http://bootply.com/98314


Opción 2 : enlaces de navegación izquierda, central y derecha:

enter image description here

  @media (min-width: 768px) { .navbar-nav.navbar-center { position: absolute; left: 50%; transform: translatex(-50%); } } 

http://www.bootply.com/SGYC6BWeBK

Opción 3 – Centre tanto la marca como los enlaces

enter image description here

 .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 centrales
A la izquierda, marca central

Para 3.x también vea nav-justified: Barra de navegación del centro Bootstrap


Center Navbar en Bootstrap
Bootstrap 4 alinea los artículos de la barra de navegación a la derecha

Necesitaba algo similar (elementos alineados a la izquierda, centro y derecha), pero con la capacidad de marcar 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; } } 

Besa mi cabeza, solo volvió a leer mi respuesta y me di cuenta de que el OP estaba pidiendo dos logotipos a la izquierda de la derecha con un menú central, y no al revés.

Esto se puede lograr estrictamente en el HTML usando la “barra de navegación” derecha de Bootstrap y “barra de navegación izquierda” para los logotipos y luego “justificado por nav” en lugar de “navbar-nav” para su UL. No se necesita CSS adicional (a menos que desee colocar la barra de navegación hacia abajo alternar en el centro en la ventana xs, entonces debe anular un poco, pero se lo dejo a usted).

  

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


Para aquellos que llegaron aquí tratando de centrar la “marca” aquí está mi vieja 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 ya 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 sm, podría superponerse debido a la posición absoluta y como comentaron los comentaristas. dijo, una vez que llegas a la ventana XS, el interruptor de palanca se rompe (a menos que uses el posicionamiento Z pero realmente no quería tener que preocuparte).

Entonces, lo que hice fue utilizar las utilidades de respuesta bootstrap para crear una versión múltiple del bloque de marca:

  

Así que ahora las ventanas gráficas y md tienen la marca centrada con enlaces hacia la izquierda y la derecha, una vez que llegas a la ventana sm tus enlaces caen a la siguiente línea para que no se superpongan con tu marca, y finalmente al xs ventana gráfica la collaspe entra en acción y puede usar la palanca. Puede llevar esto un paso más allá y modificar las consultas de medios para la barra de navegación -derecha y barra de navegación- izquierda cuando se usa con la barra de navegación, de modo que en la vista sm los enlaces estén centrados pero no tengan tiempo para eliminarlos.

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

Supongo que tener 3 marcas podría ser tan complicado como la “z”, pero siento que en el mundo del diseño receptivo esta solución se adapta mejor a mi estilo.

Bootstrap 4 (a partir de alfa 6)

Navbars están construidas con flexbox! En lugar de flotadores, necesitará Flexbox y utilidades de margen.

Para Align Right use justify-content-end en la div del collapse :

  

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

Encontré que la siguiente era una solución mejor según el contenido de los artículos izquierdo, central y derecho. Un ancho del 100% sin un margen causaba la superposición de los div y evitaba que las tags de anclaje funcionaran correctamente, es decir, sin el uso desordenado de los índices z.

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

Esta es una pregunta anticuada, pero encontré una solución alternativa para compartir desde la página bootstrup github. La documentación no se ha actualizado y hay otras preguntas sobre SO que solicitan la misma solución, aunque con preguntas ligeramente diferentes. Esta solución no es específica para su caso, pero como puede ver, la solución es

justo después de

pero también puede ser reemplazada por

según sea necesario.

    Navbar right padding broken          

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

y aparece como un no se corregirá en V3.