Dans Bootstrap , quelle est la façon la plus conviviale de créer une barre de navigation avec le logo A à gauche, les éléments de menu au centre et le logo B à droite?

Voici ce que j'ai essayé jusqu'à présent, et il finit par être aligné de sorte que le logo A soit à gauche, les éléments de menu à côté du logo à gauche et le logo B à droite.

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

Mise à jour 2019

Bootstrap 4

Maintenant que Bootstrap 4 a une flexbox, l'alignement de la Navbar est beaucoup plus facile. Voici des exemples mis à jour pour la gauche , la droite et le centre dans la barre de navigation Bootstrap 4 , et de nombreux autres scénarios d'alignement illustrés ici .

La flexbox , les marges automatiques et les classes utilitaires de commande peuvent être utilisées pour aligner le contenu de la barre de navigation selon les besoins. Il y a beaucoup de choses à considérer, y compris l'ordre et l'alignement des éléments Navbar (marque, liens, bascule) sur les grands écrans et les vues mobiles / réduites. N'utilisez pas les classes de grille (ligne, col) pour la barre de navigation .

Voici différents exemples ...

Liens gauche, centre (marque) et droit:

<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

Une autre option BS4 Navbar avec des liens centraux et une image de logo en superposition :

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

Ou , ces autres scénarios d'alignement Bootstrap 4:

marque à gauche, liens de point mort, (vide à droite)

marque et centre de liens, icônes gauche et droite

Plus d'exemples Bootstrap 4 :

bascule gauche sur mobile, marque droite
centre marque et liens sur mobile
droite aligne les liens sur le bureau, liens centre sur mobile
gauche liens & bascule, marque centrale, recherche droite

Voir aussi: Bootstrap 4 aligner les éléments de la barre de navigation à droite
Bootstrap 4 navbar aligner à droite avec le bouton qui ne se replie pas sur le mobile
Centrer un élément dans Bootstrap 4 Navbar

Bootstrap 3

Option 1 - Centre de la marque, avec liens de navigation gauche / droite:

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

Option 2 - Liens de navigation gauche, centre et droite:

<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

Option 3 - Centrer la marque et les liens

.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

Plus d'exemples:

Marque gauche, liens
centraux Bascule gauche, marque centrale

Pour 3.x, voir également justification de la navigation: barre de navigation centrale Bootstrap

Centrer la barre de navigation dans Bootstrap
Bootstrap 4 aligner les éléments de la barre de navigation vers la droite

Bootstrap 4

Nous avons plusieurs façons d'aligner les éléments navBars.

Pour alignement à gauche

class = "navbar-nav mr-auto "

Pour alignement à droite

class = "navbar-nav ml-auto "

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

J'avais besoin de quelque chose de similaire (éléments alignés à gauche, au centre et à droite), mais avec la possibilité de marquer les éléments centrés comme actifs. Ce qui a fonctionné pour moi, c'est:

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 (à partir de l'alpha 6)

Les barres de navigation sont construites avec flexbox! Au lieu de flottants, vous aurez besoin d'utilitaires flexbox et margin.

Pour utiliser Align Right justify-content-endsur le 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>

Exemple complet ici: https://jsbin.com/kemawa/edit?output

Je me tape la tête, je viens de relire ma réponse et j'ai réalisé que l'OP demandait deux logos, l'un à gauche, un à droite avec un menu central, et non l'inverse.

Cela peut être accompli strictement dans le HTML en utilisant "navbar-right" et "navbar-left" de Bootstrap pour les logos, puis "nav-justification" au lieu de "navbar-nav" pour votre UL. Aucun CSS supplémentaire n'est nécessaire (sauf si vous souhaitez placer la bascule navbar-collapse au centre dans la fenêtre xs, vous devez alors remplacer un peu, mais vous le laisserez).

<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

Pour ceux qui sont venus ici en essayant de centrer la "marque", voici mon ancienne réponse:

Je sais que ce fil est un peu vieux, mais juste pour poster mes résultats lorsque j'y travaille. J'ai décidé de baser ma solution sur la réponse de Skelly depuis les ruptures de Tomaszbak sur Collaspe. J'ai d'abord créé mon "navbar-center" et désactivé le flotteur pour la navbar normale dans mon CSS:

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

.navbar-brand{
   float:none;
}

Cependant, le problème avec la réponse de skelly est que si vous avez un nom de marque très long (ou si vous vouliez utiliser une image pour votre marque), une fois arrivé à la fenêtre sm, il pourrait y avoir un chevauchement en raison de la position absolue et comme l'ont fait les commentateurs. dit, une fois que vous arrivez à la fenêtre xs, l'interrupteur à bascule se casse (sauf si vous utilisez le positionnement Z mais je ne voulais vraiment pas avoir à m'en soucier).

Donc, ce que j'ai fait, c'est utiliser les utilitaires réactifs de bootstrap pour créer plusieurs versions du bloc de marque:

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

Alors maintenant, les fenêtres lg et md ont la marque centrée avec des liens à gauche et à droite, une fois que vous arrivez à la fenêtre sm, vos liens passent à la ligne suivante afin de ne pas chevaucher votre marque, puis enfin au xs afficher le collaspe entre en action et vous pouvez utiliser la bascule. Vous pouvez aller un peu plus loin et modifier les requêtes multimédias pour la barre de navigation droite et la barre de navigation gauche lorsqu'elles sont utilisées avec la marque navbar de sorte que dans la fenêtre sm, les liens soient tous centrés mais n'aient pas eu le temps de les vérifier.

Vous pouvez consulter mon ancien bootply ici: www.bootply.com/n3PXXropP3

Je suppose qu'avoir 3 marques pourrait être aussi compliqué que le "z" mais j'ai l'impression que dans le monde du design réactif, cette solution correspond mieux à mon style.

Vous définissez la marge gauche sur auto -> ml-auto sur la section que vous souhaitez déplacer vers la droite.

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

J'ai trouvé que ce qui suit était une meilleure solution en fonction du contenu de vos éléments gauche, central et droit. Une largeur de 100% sans marge a provoqué le chevauchement des divs et empêchait les balises d'ancrage de fonctionner correctement - c'est-à-dire sans l'utilisation désordonnée des z-index.

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

C'est une question datée mais j'ai trouvé une autre solution à partager directement depuis la page github de bootstrap. La documentation n'a pas été mise à jour et il y a d'autres questions sur SO demandant la même solution bien que sur des questions légèrement différentes. Cette solution n'est pas spécifique à votre cas, mais comme vous pouvez le voir, la solution est <div class="container">juste après, <nav class="navbar navbar-default navbar-fixed-top">mais peut également être remplacée par <div class="container-fluid"au besoin.

<!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 solution a été trouvée sur un violon sur cette page: https://github.com/twbs/bootstrap/issues/18362

et est répertorié comme ne sera pas corrigé dans la 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>

Mettez les champs que vous souhaitez centrer, à droite ou à gauche selon la division ci-dessus.

La solution la plus simple:

Il suffit de diviser les navbarcolonnes en: par exemple, si vous avez 24 colonnes au total, 12 vont être vides et 12 vont contraindre la barre de navigation:

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