In Bootstrap , qual è il modo più intuitivo per creare una barra di navigazione con Logo A a sinistra, voci di menu al centro e Logo B a destra?

Ecco quello che ho provato finora, e finisce per essere allineato in modo che il Logo A sia a sinistra, le voci di menu accanto al logo a sinistra e il Logo B a destra.

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

Aggiornamento 2019

Bootstrap 4

Ora che Bootstrap 4 ha flexbox, l'allineamento di Navbar è molto più semplice. Ecco alcuni esempi aggiornati di sinistra , destra e centro nella barra di avvio di Bootstrap 4 e molti altri scenari di allineamento mostrati qui .

La flexbox , i margini automatici e le classi di utilità per l' ordinazione possono essere utilizzate per allineare il contenuto di Navbar secondo necessità. Ci sono molte cose da considerare tra cui l'ordine e l'allineamento degli elementi Navbar (marchio, collegamenti, toggler) su entrambi gli schermi di grandi dimensioni e le visualizzazioni mobili / compresse. Non utilizzare le classi della griglia (riga, colonna) per la barra di navigazione .

Ecco alcuni esempi ...

Collegamenti sinistro, centrale (marchio) e destro:

<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

Un'altra opzione BS4 Navbar con collegamenti centrali e immagine logo sovrapposta :

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

Oppure , questi altri scenari di allineamento Bootstrap 4:

marchio a sinistra, collegamenti al punto morto, (a destra vuoto)

centro marchi e collegamenti, icone sinistra e destra

Altri esempi Bootstrap 4 :

alternatore a sinistra sul cellulare, marca al
centro a destra e collegamenti sul cellulare a
destra allinea i collegamenti sul desktop, collegamenti al centro sui collegamenti a sinistra mobile
e interruttore, marchio al centro, ricerca a destra

Vedi anche: Bootstrap 4 allinea gli elementi della barra di navigazione a destra
Bootstrap 4 la barra di navigazione a destra allinea con il pulsante che non si comprime sul dispositivo mobile
Centra un elemento in Bootstrap 4 Navbar

Bootstrap 3

Opzione 1 - Centro del marchio, con collegamenti di navigazione sinistra / destra:

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

Opzione 2 - Collegamenti di navigazione sinistro, centrale e destro:

<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

Opzione 3 : centrare sia il marchio che i collegamenti

.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

Altri esempi:

Marchio sinistro, collegamenti centrali
Attacco sinistro, marchio centrale

Per 3.x vedi anche giustificato per la navigazione: barra di navigazione centrale Bootstrap

Centra la barra di navigazione in Bootstrap
Bootstrap 4 allinea gli elementi della barra di navigazione a destra

Bootstrap 4

Abbiamo molti modi per allineare gli elementi navBars.

Per allineare a sinistra

class = "navbar-nav mr-auto "

Per allineare a destra

class = "navbar-nav ml-auto "

Per Center Align

class = "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>

Avevo bisogno di qualcosa di simile (oggetti allineati a sinistra, al centro e a destra), ma con la possibilità di contrassegnare gli oggetti centrati come attivi. Ciò che ha funzionato per me è stato:

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 partire da alpha 6)

Le navbar sono costruite con flexbox! Invece di float, avrai bisogno di utility flexbox e margin.

Per Allineare a destra usare justify-content-endsul 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>

Esempio completo qui: https://jsbin.com/kemawa/edit?output

Schiocca la testa, rileggi la mia risposta e mi sono reso conto che l'OP stava chiedendo due logo uno a sinistra a destra con un menu centrale, non viceversa.

Questo può essere realizzato rigorosamente nell'HTML usando "navbar-right" e "navbar-left" di Bootstrap per i loghi e quindi "giustificato per la navigazione" anziché "navbar-nav" per il tuo UL. Non è necessario alcun CSS aggiuntivo (a meno che non si desideri mettere al centro il selettore navbar-collapse nel viewport xs, quindi è necessario sovrascrivere un po ', ma lo lascerà a te).

<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

Per coloro che sono arrivati ​​qui cercando di centrare il "marchio" ecco la mia vecchia risposta:

So che questa discussione è un po 'vecchia, ma solo per pubblicare le mie scoperte quando ci sto lavorando. Ho deciso di basare la mia soluzione sulla risposta di skelly poiché le interruzioni di tomaszbak sul collaspe. Per prima cosa ho creato il mio "centro di navigazione" e disattivato il float per la normale barra di navigazione nel mio CSS:

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

.navbar-brand{
   float:none;
}

Tuttavia, il problema con la risposta di skelly è se hai un marchio molto lungo (o se volevi usare un'immagine per il tuo marchio), quindi una volta arrivato al viewport di sm, ci potrebbero essere sovrapposizioni a causa della posizione assoluta e come hanno i commentatori detto, una volta arrivato al viewport xs l'interruttore a levetta si interrompe (a meno che non usi il posizionamento Z ma non volevo davvero preoccuparmene).

Quindi quello che ho fatto è stato utilizzare le utility responsive bootstrap per creare più versioni del blocco del marchio:

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

Quindi ora i viewport lg e md hanno il marchio centrato con i link a sinistra e a destra, una volta arrivato al viewport sm i tuoi link passano alla riga successiva in modo da non sovrapporsi al tuo marchio, e infine alla xs visualizza il collaspe che entra in gioco e puoi usare l'interruttore. Potresti fare un ulteriore passo avanti e modificare le query multimediali per la barra di navigazione destra e la barra di navigazione sinistra quando utilizzate con il marchio navbar in modo che nella vista sm i collegamenti siano tutti centrati ma non abbiano avuto il tempo di controllarli.

Puoi controllare il mio vecchio bootply qui: www.bootply.com/n3PXXropP3

Immagino che avere 3 marchi potrebbe essere tanto fastidioso quanto la "z" ma mi sento come nel mondo del design reattivo questa soluzione si adatta meglio al mio stile.

Ho scoperto che la seguente era una soluzione migliore a seconda del contenuto dei tuoi elementi sinistro, centrale e destro. Una larghezza del 100% senza margine causava la sovrapposizione di div e impediva il corretto funzionamento dei tag di ancoraggio, ovvero senza l'uso disordinato degli z-index.

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

Questa è una domanda datata ma ho trovato una soluzione alternativa da condividere direttamente dalla pagina github di bootstrap. La documentazione non è stata aggiornata e ci sono altre domande su SO che richiedono la stessa soluzione anche se su domande leggermente diverse. Questa soluzione non è specifica per il tuo caso, ma come puoi vedere la soluzione è <div class="container">subito dopo <nav class="navbar navbar-default navbar-fixed-top">ma può anche essere sostituita con <div class="container-fluid"necessità.

<!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 soluzione è stata trovata su un violino in questa pagina: https://github.com/twbs/bootstrap/issues/18362

ed è elencato come non risolto in 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>

Inserisci i campi che vuoi centrare, a destra o a sinistra in base alla divisione sopra.

Impostate il margine sinistro su auto -> ml-auto sulla sezione che volete spostare a destra.

 <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 soluzione più semplice:

Dividi semplicemente le navbarcolonne: ad esempio, se hai 24 colonne in tutto, 12 saranno vuote e 12 in contrasto con la barra di navigazione:

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