web-dev-qa-db-fra.com

Bootstrap NavBar avec des éléments alignés à gauche, au centre ou à droite

Dans Bootstrap, quel est le moyen le plus convivial pour la plate-forme de créer une barre de navigation comportant 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. Le logo A se trouve à gauche, les options 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>
htmlcsstwitter-bootstrapbootstrap-4navbar
338
Aliv

Mise à jour de 2019

Bootstrap 4

Maintenant que Bootstrap 4 a la flexbox, l'alignement de la barre de navigation est beaucoup plus facile. Voici exemples mis à jour pour left , right et centre dans le Bootstrap 4 Navbar , et de nombreux autres alignements scénarios présentés ici .

Les classes d'utilitaire flexbox , marges automatiques , et classement peuvent être utilisées pour aligner le contenu de la barre de navigation selon les besoins. Vous devez prendre en compte de nombreux éléments, notamment l'ordre et l'alignement des éléments de la barre de navigation (marque, liens, bascule) sur les grands écrans et les vues mobile/réduite. N'utilisez pas les classes de grille (row, col) pour la barre de navigation .

Voici divers exemples ...

Liens gauche, centre (marque) et droit:

enter image description here

<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 liens centraux et superposition de l’image du logo :

center links and overlay logo image

<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 Bootstrap 4 scénarios d'alignement:

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

Navbar brand left, dead center links

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

enter image description here

Plus Bootstrap 4 exemples :

bascule à gauche sur le mobile, marque à droite
marque centrale et liens sur le mobile
liens alignés à droite sur le bureau, liens centraux sur le mobile
liens de gauche et bas de page, marque centrale, recherche à droite

Voir aussi: Bootstrap 4 aligner les éléments de la barre de navigation à droite
barre de navigation Bootstrap 4 alignée à droite avec le bouton qui ne s'effondre pas sur le mobile
Centre d'un élément dans Bootstrap 4 Barre de navigation

Bootstrap 3

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

enter image description here

<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

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

enter image description here

<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

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

Autres exemples:

marque de gauche, liens centraux
bouton gauche, marque centrale

Pour la version 3.x, voir également justifié par la navigation: Bootstrap center navbar

Centre Navbar dans Bootstrap
Bootstrap 4 aligner les éléments de la barre de navigation à droite

625
Zim

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 a été:

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

Bootstrap 4 (à partir de l'alpha 6)

Les barres de navigation sont construites avec flexbox! Au lieu de floats, vous aurez besoin de flexbox et d’utilitaires de marge.

Pour aligner à droite, utilisez justify-content-end sur le collapse div:

<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

22
Jeremy Lynch

Bootstrap 4

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

Pour Aligner à gauche enter image description here

class = "navbar-nav mr-auto "

Pour aligner à droite enter image description here

class = "navbar-nav ml-auto "

Pour le centrage enter image description here

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>
17
Jerold Joel

Smack ma tête, il suffit de relire ma réponse et se rendre compte que l'OP demandait deux logo, l'un à gauche, l'autre à droite avec un menu central, et non l'inverse.

Cela peut être accompli strictement dans le code HTML en utilisant "navbar-right" et "navbar-left" pour les logos de Bootstrap, puis "justifié par la navigation" au lieu de "navbar-nav" pour votre UL. Aucune CSS supplémentaire n'est nécessaire (à moins que vous ne vouliez placer la bascule navbar-collapse au centre de la fenêtre d'affichage xs, vous devez alors en redéfinir un peu, mais vous en aurez la responsabilité).

<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 arrivés 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 découvertes lorsque je travaille sur ce sujet. J'ai décidé de baser ma solution sur la réponse de Skelly puisque les brisures de tomaszbak sur du collaspe. J'ai d'abord créé mon "navbar-center" et désactivé le flottant pour la barre de navigation 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 souhaitez utiliser une image pour votre marque), une fois dans la fenêtre d'affichage sm, il pourrait y avoir un chevauchement en raison de la position absolue et comme les commentateurs l'ont fait. dit, une fois dans la fenêtre d'affichage xs, l'interrupteur à bascule se casse (sauf si vous utilisez le positionnement Z mais je ne voulais vraiment pas avoir à m'en soucier).

J'ai donc utilisé le bootstrap tilitaires responsive 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 dans la fenêtre sm, les liens passent à la ligne suivante de manière à ne pas chevaucher votre marque, puis enfin au x Dans la fenêtre d'affichage, le collaspe entre en action et vous pouvez utiliser la bascule. Vous pourriez aller un peu plus loin et modifier les requêtes de média pour navbar-right et navbar-left lorsqu'utilisé avec navbar-brand afin que, dans la fenêtre sm, les liens soient tous centrés sans avoir le temps de les vérifier.

Vous pouvez vérifier mon ancien bootply ici: www.bootply.com/n3PXXropP3

J'imagine qu'avoir 3 marques peut être aussi fastidieux que le "z" mais je me sens comme dans le monde du design réactif cette solution correspond mieux à mon style.

11
Jonofthedead

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

<!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 de cette page: https://github.com/twbs/bootstrap/issues/18362

et est répertorié en tant que ne résoudra pas en V3.

1
Shawn

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

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

Cette approche a fonctionné pour moi:

.navbar,
.navbar-collapse {
    padding-right: 10%;
    padding-left: 10%;
}

.navbar-header{
    padding-left: 10%;
}
0
Jose Garza