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>

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:

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

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

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

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:

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

<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

.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

Bootstrap 4

Tenemos muchas formas de alinear los elementos de navBars.

Para alinear a la izquierda

class = "navbar-nav mr-auto "

Para alinear a la derecha

clase = "navbar-nav ml-auto "

Para alinear centro

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>

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

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

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.

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

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.

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

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>

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>