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


437

En Bootstrap , ¿cuál es la forma más fácil de usar para crear una barra de navegación que tenga el logotipo A a la izquierda, los elementos de menú en el centro y el logotipo B a la derecha?

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

<div class="navbar navbar-fixed-top navbar-custom ">
  <div class="container" >
    <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>
      <a class="navbar-brand" href="#"><span class="navbar-logo">Logo_A</span></a>
    </div>
    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#about">Menu Item 1</a></li>
        <li><a href="#contact">Menu Item 2</a></li>
        <li><a href="#about">Menu Item 3</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><img src="images/Logo_B.png" class="img-responsive"></a></li>
      </ul>
    </div>
  </div>
</div>

Respuestas:


803

Actualización 2019

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 para izquierda , derecha y centro en la barra de navegación de Bootstrap 4 , y muchos otros escenarios de alineación demostrados aquí .

Las clases de utilidad flexbox , márgenes automáticos y pedidos se pueden usar para alinear el contenido de la barra de navegación según sea necesario. Hay muchas cosas a tener en cuenta, incluido el orden y la alineación de los elementos de la barra de navegación (marca, enlaces, alternador) tanto en pantallas grandes como en las vistas móviles / contraídas. No use las clases de cuadrícula (fila, col) para la barra de navegación .

Aquí hay varios ejemplos ...

Enlaces izquierdo, central (marca) y derecho:

ingrese la descripción de la imagen aquí

<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 barra de navegación BS4 con enlaces centrales e imagen de logotipo superpuesta :

enlaces centrales y superposición de imagen del 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>


O estos otros escenarios de alineación de Bootstrap 4:

marca a la izquierda, enlaces de punto muerto, (vacío a la derecha)

Marca de barra de navegación izquierda, enlaces de punto muerto


centro de marca y enlaces, íconos a izquierda y derecha

ingrese la descripción de la imagen aquí


Más ejemplos de Bootstrap 4 :

alternador a la izquierda en el móvil, marca a la derecha marca
central y enlaces en el móvil a la
derecha alinear enlaces en el escritorio, enlaces centrales en el móvil a la
izquierda enlaces y alternador, marca central, buscar a la derecha


Ver también: Bootstrap 4 alinea los elementos de la barra de navegación a la derecha
Bootstrap 4 la barra de navegación alinea a la derecha con el botón que no se contrae en el móvil
Centra un elemento en Bootstrap 4 Navbar


Bootstrap 3

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

ingrese la descripción de la imagen aquí

<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)


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

ingrese la descripción de la imagen aquí

<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

Opción 3 : centrar tanto la marca como los enlaces

ingrese la descripción de la imagen aquí

.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 Alternador izquierdo, marca central

Para 3.x también vea justificado por navegación: barra de navegación central de Bootstrap


Barra de navegación central en Bootstrap
Bootstrap 4 alinea los elementos de la barra de navegación a la derecha


1
¿Cómo puedes hacer que los elementos de la izquierda colapsen en otra palanca a la izquierda?
gepex

1
Creé 2 ejemplos de jsfiddle, ya que bootply no funciona en este momento. sol 1 y sol 2 . por cierto, la solución 2 funciona mejor (en mi humilde opinión)
GiuServ

Para Bootstrap 4, usando Firefox, el ejemplo # 1 no funciona. Agregar la .absclase hace que el navbar-brandelemento cubra los botones a la izquierda y a la derecha, haciéndolos imposibles de hacer clic
8bithero

1
¿Cómo se marca esto como respuesta? Da 3 opciones para BS 3 y 4, gracias señor.
Murkantilism

Ninguno de sus enlaces codeply se está abriendo y se debe al horrible diseño utilizado en ese sitio web. Mezclaron todo tipo de publicidad, graphQL ... juntos y si uno no se carga o bloquea, toda la pantalla estará en blanco. sí, así es como funciona angular (o NO funciona).
AaA

59

Bootstrap 4

Tenemos muchas formas de alinear los elementos de navBars.

Para alinear a la izquierda ingrese la descripción de la imagen aquí

class = "navbar-nav mr-auto "

Para alinear a la derecha ingrese la descripción de la imagen aquí

clase = "navbar-nav ml-auto "

Para alinear centro ingrese la descripción de la imagen aquí

clase = "navbar-nav mx-auto "

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<a routerLink="/" class="navbar-brand" href="#">Bootsrap 4</a>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact">Contact us</a>
</li>
</ul>
</nav>

1
agregar class = "navbar-brand mx-auto" en la etiqueta b-nav-item hizo el truco para mí
Sheece Gardazi

36

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

http://www.bootply.com/CSI2KcCoEM

<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 class="navbar-left"><a href="#">Left 1</a></li>
      <li class="navbar-left"><a href="#">Left 2</a></li>
      <li class="active"><a href="#">Center 1</a></li>
      <li><a href="#">Center 2</a></li>
      <li><a href="#">Center 3</a></li>
      <li class="navbar-right"><a href="#">Right 1</a></li>
      <li class="navbar-right"><a href="#">Right 2</a></li>
    </ul>
  </div>
</nav>

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;
  }
}

1
Eso está bastante cerca, pero se rompe cuando lo colapsas. Si lo ve en un dispositivo móvil, "Marca" aparece debajo de la barra de menú. ¿Brand no es parte del Nav real?
spasticninja

1
Esto responde al OP más de cerca.
Roger Dueck el

Hasta ahora esto ha funcionado para mí. No tengo una Marca ni un elemento alineado a la derecha, solo 3 opciones centradas. Gracias
Alessandro

Creo que esta solución funciona mejor que la respuesta más votada, ya que al reducir el tamaño de la pantalla ninguno de los elementos cuelga de la barra de navegación (al menos en el código de ejemplo compartido)
pravin

26

Bootstrap 4 (a partir de alfa 6)

¡Las barras de navegación están construidas con flexbox! En lugar de flotadores, necesitará utilidades de flexbox y margen.

Para usar Align Right justify-content-enden el collapsediv:

<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


3
No funciona para mí ... justify-content-end parece aplicarse a nav y no parece estar funcionando para navbar es la última versión de bootstrap.
Stephane Paquet

1
@stephanePaquet, esto es aplicable a alpha 6 (la versión más reciente de bootstrap): ¿qué estás usando?
Jeremy Lynch

11

Golpee mi cabeza, solo releí mi respuesta y me di cuenta de que el OP estaba pidiendo dos logotipos, uno a 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 CSS adicional (a menos que desee colocar el interruptor de colapso de la barra de navegación en el centro en la vista xs, entonces debe anular un poco, pero lo dejará en sus manos).

<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 navbar-left"><a href="#"><img src="http://placehold.it/150x30"></a></div>

  </div>
  <div class="navbar-brand navbar-right"><a href="#"><img src="http://placehold.it/150x30"></a></div>

  <div class="navbar-collapse collapse">
    <ul class="nav nav-justified">
        <li><a href="#">home</a></li>
        <li><a href="#about">about</a></li>
    </ul>
  </div>
</nav>

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


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

Sé que este hilo es un poco viejo, pero solo para publicar mis hallazgos al trabajar en esto. Decidí basar mi solución en la respuesta de skelly desde que tomaszbak se rompe en colapsar. Primero creé mi "navbar-center" y apagué el flotante 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 los comentaristas tienen dijo, una vez que llegas a la vista xs, el interruptor de palanca se rompe (a menos que uses el posicionamiento Z pero realmente no quería tener que preocuparme por eso).

Entonces, lo que hice fue utilizar las utilidades receptivas bootstrap para crear una versión múltiple del bloque de la 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>

Entonces, las ventanas gráficas lg y md tienen la marca centrada con enlaces a izquierda y derecha, una vez que llega a la ventana sm sus enlaces caen a la siguiente línea para que no se superpongan con su marca, y finalmente en la xs viewport el collaspe entra en acción y puede usar la palanca. Podría llevar esto un paso más allá y modificar las consultas de medios para la barra de navegación derecha y la barra de navegación izquierda cuando se usa con la marca de barra de navegación, de modo que en la ventana sm los enlaces estén centrados pero no hayan tenido tiempo de examinarlo.

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

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


1

Encontré que la siguiente era una mejor solución dependiendo del contenido de sus elementos izquierdo, central y derecho. Un ancho del 100% sin margen causaba la superposición de divs y evitaba que las etiquetas 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%;
}

1

Esta es una pregunta anticuada, pero encontré una solución alternativa para compartir directamente desde la página de bootstrap github. La documentación no se ha actualizado y hay otras preguntas sobre SO que piden 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 la <div class="container">adecuada después, <nav class="navbar navbar-default navbar-fixed-top">pero también se puede reemplazar <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 aparece como no se solucionará en V3.


1
<div class="d-flex justify-content-start">hello</div>    
<div class="d-flex justify-content-end">hello</div>
<div class="d-flex justify-content-center">hello</div>
<div class="d-flex justify-content-between">hello</div>
<div class="d-flex justify-content-around">hello</div>

Coloque los campos que desea centrar, derecha o izquierda según la división anterior.


1

Establece el margen izquierdo en auto -> ml-auto en la sección que desea mover a la derecha.

 <nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" 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="collapse navbar-collapse" id="navbarNavAltMarkup">
  <div class="navbar-nav ml-auto"> !<--MARGIN LEFT AUTO HERE !-->
    <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="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </div>
</div>


-2

La solución más simple:

Simplemente divida las navbarcolumnas en columnas: por ejemplo, si tiene 24 columnas en total, 12 estarán vacías y 12 contravendrán 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>

1
La fila de cuadrícula y la columna no deben usarse dentro de la barra de navegación. Utiliza el contenido compatible .
Zim

@ Zim Por qué no, ¿qué tiene de malo?
analizador
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.