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

341

Comment aligner un élément de la barre de navigation à droite?

Je veux avoir le login et m'inscrire à droite. Mais tout ce que j'essaie ne semble pas fonctionner.

Image de Navbar

Voici ce que j'ai essayé jusqu'à présent:

  • <div>autour <ul>de l'attribut:style="float: right"
  • <div>autour <ul>de l'attribut:style="text-align: right"
  • essayé ces deux choses sur les <li>balises
  • essayé à nouveau toutes ces choses avec !importantajouté à la fin
  • changé nav-itemà nav-rightla<li>
  • a ajouté une pull-sm-rightclasse au<li>
  • a ajouté une align-content-endclasse au<li>

Voici mon code:

<div id="app" class="container">
  <nav class="navbar navbar-toggleable-md navbar-light bg-faded">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand" href="#">Navbar</a>
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricingg</a>
      </li>
    </ul>
    <ul class="navbar-nav " >
      <li  class="nav-item">
        <a class="nav-link" href="{{ url('/login') }}">Login</a>
      </li>
      <li  class="nav-item">
        <a class="nav-link" href="{{ url('/register') }}">Register</a>
      </li>
    </ul>
  </nav>
  @yield('content')
</div>
css twitter-bootstrap flexbox bootstrap-4 navbar Luuk Wuijster
la source
Les barres de navigation sont construites avec flexbox à partir de la version alpha 6.
max
1
Oui, alors que dois-je faire pour l'aligner à droite. J'ai déjà essayé quelques trucs flexbox sans aucune chance. : /
Luuk Wuijster

Réponses:

533

Bootstrap 4 a plusieurs façons d'aligner les éléments de la barre de navigation . float-rightne fonctionnera pas car la barre de navigation est maintenant flexbox.

Vous pouvez utiliser mr-autopour la marge droite automatique sur le 1er (gauche) navbar-nav. Alternativement , ml-autopourrait être utilisé sur le 2ème (à droite) navbar-nav, ou si vous n'en avez qu'un seul navbar-nav.

<nav class="navbar navbar-expand-md navbar-light bg-light">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
                <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Features</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Pricing</a>
            </li>
        </ul>
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" href="{{ url('/login') }}">Login</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="{{ url('/register') }}">Register</a>
            </li>
        </ul>
    </div>
</nav>

https://codeply.com/go/P0G393rzfm

Il existe également des utilitaires flexbox. Dans ce cas, vous avez 2 navbar-navs, donc justify-content-betweendans navbar-collapsetravailleraient la même l'espace entre eux,

 <div class="navbar-collapse collapse justify-content-between">
     <ul class="navbar-nav mr-auto">
               ..
     </ul>
     <ul class="navbar-nav">
           ..
     </ul>
 </div>

Mise à jour pour Bootstrap 4.0 et plus récent

À partir de la version bêta de Bootstrap 4, ml-autofonctionnera toujours pour pousser les éléments vers la droite. Sachez simplement que les navbar-toggleable-cours ont changé ennavbar-expand-*

Navbar droite mise à jour pour Bootstrap 4

Un autre scénario d'alignement à droite de la barre de navigation Bootstrap 4 comprend un bouton sur la droite qui reste en dehors de la navigation de l' effondrement mobile afin qu'il soit toujours affiché à toutes les largeurs.

Bouton d'alignement à droite toujours visible

entrez la description de l'image ici

entrez la description de l'image ici

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

Zim
la source
1
mr-autone fonctionne pas si l'élément le plus à droite est un dropdown. Les éléments de la liste déroulante débordent sur le bord droit de la page.
Ege Ersoz
6
Cela fonctionne: codeply.com/go/P0G393rzfm - le problème n'est pas mr-autoque la question concerne l'alignement à droite qui fonctionne. Postez une nouvelle question si vous avez des problèmes avec la liste déroulante, mais vous faites probablement référence à ce problème: stackoverflow.com/questions/43867258/…
Zim
2
Vous pouvez également ajouter .dropdown-menu-rightdes listes déroulantes alignées à droite dans la barre de navigation. Ne pas le faire peut couper la liste déroulante à certaines largeurs.
rybo111
@ZimSystem merci pour vos réponses. J'ai suivi votre réponse ici stackoverflow.com/questions/19733447/… . J'ai une question: comment puis-je obtenir un élément sur le côté gauche et un élément sur le côté droit?
Lokesh Pandey
Dans codeply.com/go/P0G393rzfm , vous avez montré un ul à gauche et un ul à droite. Cela a été réalisé en ajoutant mr-auto au premier. Mais que faire si je n'ai qu'un seul ul? Je ne veux pas créer un ul vide juste pour en aligner un autre à droite.
Santosh Kumar
140

Dans mon cas, je voulais un seul ensemble de boutons / options de navigation et j'ai constaté que cela fonctionnerait:

<div class="collapse navbar-collapse justify-content-end" id="navbarCollapse">
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#">Sign Out</a>
    </li>
  </ul>
</div>

Donc, vous ajouterez justify-content-endà la div et omettez mr-autosur la liste.

Voici un exemple de travail .

Craig van Tonder
la source
3
@numediaweb Dans l'exemple OP, il utilise deux éléments dans la navigation, alignant un à gauche et un à droite; où j'en ai utilisé un seul et l'ai aligné à droite. Ce n'est pas la bonne réponse mais elle est utile comme réponse à une légère variation de la question;)
Craig van Tonder
Cela fonctionne pour un seul navbar-nav, mais la mr-autométhode est utilisée dans les documents Bootstrap .
Zim
mr-autoest utilisé dans les documents, mais pas pour aligner les éléments vers la gauche. Cette réponse est sémantiquement correcte, comme mentionné dans cet article: blog.getbootstrap.com/2017/01/06/bootstrap-4-alpha-6
qwaz
La question est si vous essayez d'aligner 2 listes de liens ou 1. Si seulement 1, votre réponse fonctionne et m'a été très utile. Merci!
barefootsanders
Cela a fonctionné pour moi, mais je ne sais pas pourquoi celle au-dessus de cette réponse ne fonctionne pas.
Suhail Akhtar
59

Pour ceux qui sont toujours aux prises avec ce problème dans BS4, essayez simplement le code ci-dessous - 

<ul class="navbar-nav ml-auto">
Muhammad Tarique
la source
7
Non - cela aligne tout à droite. La question dit qu'il ne souhaite aligner qu'un seul élément vers la droite.
NickG
2
Vérifiez le document officiel à m*-autoce sujet pousse le contenu vers la gauche ou la droite selon l'endroit où vous mettez la classe
Pierre de LESPINAY
@PierredeLESPINAY, oui ml-autopousse le contenu à la position la plus à droite, mais je me demandais juste pourquoi mr-0ne pouvait pas faire le travail?
avocat le
42

Sur Bootstrap 4

Si vous souhaitez aligner la marque à votre gauche et tous les éléments de la barre de navigation à droite, changez la valeur par défaut mr-autoenml-auto

<ul class="navbar-nav ml-auto">
salut Sébastien
la source
32

Sur Bootsrap 4.0.0-beta.2 , aucune des réponses énumérées ici n'a fonctionné pour moi. Enfin, le site Bootstrap m'a donné la solution, non pas via sa doc mais via son code source de la page ...

Getbootstrap.com aligner leur droit navbar-navà droite avec l'aide de la classe suivante: ml-md-auto.

ClemC
la source
1
A fonctionné magnifiquement pour moi. Rien d'autre ne l'a fait.
Maria Campbell
14

Utilisez ml-autoplutôt mr-autoqu'après avoir appliqué navjustify-content-end auul

James Pike
la source
9

Utilisez ce code pour déplacer des éléments vers la droite.

<div class="collapse navbar-collapse justify-content-end">
Maijied Hasan Shuvo
la source
1
cela ne fonctionnera pas lorsque vous avez un menu réduit, mais avec le ml-auto, cela fonctionnera toujours parce que lorsque le menu est réduit, les éléments <li> prennent toujours 100% de la largeur, donc aucune marge ne sera appliquée.
Ryan S
8

Si vous voulez Accueil, Fonctionnalités et Prix à gauche immédiatement après votre nav-brand, puis connectez-vous et inscrivez-vous à droite puis encapsulez les deux listes <div>et utilisez .justify-content-between:

<div class="collapse navbar-collapse justify-content-between">
<ul>....</ul>
<ul>...</ul>
</div>
J Kennedy
la source
7

Ajoutez simplement la mr-autoclasse à ul:

<ul class="nav navbar-nav mr-auto">

Si vous avez une liste de menus des deux côtés, vous pouvez faire quelque chose comme ceci:

<ul class="navbar-nav mr-auto">
  <li class="nav-item active">
    <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>
<ul class="navbar-nav ml-auto">
  <li class="nav-item active">
    <a class="nav-link" href="#">left 1</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">left 2</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">left disable</a>
  </li>
</ul>
SKL
la source
5

utiliser la classe flex-row-reverse

<nav class="navbar navbar-toggleable-md navbar-light">
    <div class="container">
        <button class="navbar-toggler navbar-toggler-right" 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>
        <a class="navbar-brand" href="#">
            <i class="fa fa-hospital-o fa-2x" aria-hidden="true"></i>
        </a>
        <div class="collapse navbar-collapse flex-row-reverse" id="navbarNavAltMarkup">
            <ul class="navbar-nav">
                <li><a class="nav-item nav-link active" href="#" style="background-color:#666">Home <span class="sr-only">(current)</span></a</li>
                <li><a class="nav-item nav-link" href="#">Doctors</a></li>
                <li><a class="nav-item nav-link" href="#">Specialists</a></li>
                <li><a class="nav-item nav-link" href="#">About</a></li>
            </ul>
        </div>
    </div>
</nav>
mubsher
la source
2

C'est peu de changement dans boostrap 4. Pour aligner la barre de navigation sur le côté droit, vous devez faire seulement deux changements. elles sont:

  1. en navbar-navcomplément de classe w-100que navbar-nav w-100pour faire la largeur 100
  2. en nav-item dropdownclasse, ajoutez ml-autoas nav-item dropdown ml-autopour laisser la marge laissée comme auto.

Si vous ne comprenez pas, veuillez vous référer à l'image que j'ai jointe à cela.

Lien CodePen

entrez la description de l'image ici

Code source complet

<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="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavDropdown">
    <ul class="navbar-nav w-100">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
      <li class="nav-item dropdown ml-auto">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown link
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
    </ul>  
  </div>
</nav>
Anand Raja
la source
2

Pour bootstrap 4.3.1, j'utilisais des nav-pills et rien ne fonctionnait pour moi sauf ceci:

    <ul class="nav nav-pills justify-content-end ml-auto">
    <li ....</li>
    </ul>
Ajay Kumar
la source
2

Dans v4.3 bootstrap ajoutez simplement ml-autodans <ul class="navbar-nav"> Ex:<ul class="navbar-nav ml-auto">

Mohit Prajapati
la source
0

J'utilise Angular 4 (v.4.0.0) et ng-bootstrap (Bootstrap 4). Ce code ne sera pas tous pertinents, mais en espérant que les gens puissent choisir ce qui fonctionne. Il m'a fallu un certain temps pour trouver une solution pour que mes articles se justifient, se replier correctement et pour implémenter une liste déroulante sur ma photo de profil Google (en utilisant OAuth).

<div id="header" class="header">
  <nav class="navbar navbar-toggleable-sm navbar-inverse bg-faded fixed-top">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
      aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
    <a class="navbar-brand" href="#">
          <img alt='Brand' src='../assets/images/logo-white.png' class='navbar-logo-img d-inline-block align-top '>
          <span class="navbar-logo-text">Oncoscape</span>
        </a>
    <div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
      <ul class="navbar-nav float-left">
        <a class="navbar-items nav-item nav-link active " *ngIf='authenticated' (click)='goDashboard()'>
          <span class="fa fa-dashboard"></span>Dashboard
        </a>
        <a class="nav-item nav-link navbar-items active" href="http://resources.sttrcancer.org/oncoscape-contact">
          <span class="fa fa-comments"></span>Feedback
        </a>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <img *ngIf='user && authenticated'  class="navbar-pic" src={{user.thumbnail}} alt="Smiley face">
          </a>
          <div *ngIf='user && authenticated' class="dropdown-menu " aria-labelledby="navbarDropdownMenuLink">
            <a class="dropdown-item" (click)="toProfile()">Account</a>
            <div class="dropdown-item">
              <app-login></app-login>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </nav>
</div>
<router-outlet></router-outlet>
GrettyGoose
la source
0

Pour Bootstrap 4 beta, un exemple de barre de navigation avec des éléments alignés sur le côté droit est:

<div id="app" class="container">
  <nav class="navbar navbar-expand-md navbar-light bg-faded">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand" href="#">Navbar</a>
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricingg</a>
      </li>
    </ul>
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="{{ url('/login') }}">Login</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="{{ url('/register') }}">Register</a>
      </li>
    </ul>
  </nav>
</div>
Kaczor
la source
0

L'utilisation de la boîte flexible bootstrap nous aide à contrôler le placement et l'alignement de votre élément de navigation. pour le problème ci-dessus, ajouter mr-auto est une meilleure solution.

<div id="app" class="container">
  <nav class="navbar navbar-toggleable-md navbar-light bg-faded">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand" href="#">Navbar</a>
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricingg</a>
      </li>
    </ul>
    <ul class="navbar-nav  " >
      <li  class="nav-item">
        <a class="nav-link" href="{{ url('/login') }}">Login</a>
      </li>
      <li  class="nav-item">
        <a class="nav-link" href="{{ url('/register') }}">Register</a>
      </li>
    </ul>
  </nav>
  @yield('content')
</div>

un autre placement peut inclure 

fixed- top
    fixed bottom
    sticky-top
maro
la source
0

L'exemple de travail pour BS v4.0.0-beta.2:

<body>
    <nav class="navbar navbar-expand-md navbar-dark bg-dark">
      <a class="navbar-brand" href="#">Navbar</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="navbarNavDropdown">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Features</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Pricingg</a>
          </li>
        </ul>
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link" href="#">Login</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Register</a>
          </li>
        </ul>
      </div>
    </nav>


    <div class="container-fluid">
      container content
    </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="node_modules/jquery/dist/jquery.slim.min.js"></script>
    <script src="node_modules/popper.js/dist/umd/popper.min.js"></script>
    <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
  </body>
belgoros
la source
0

Si tout ce qui précède échoue, j'ai ajouté 100% de largeur à la classe navbar en CSS. Jusque-là, mr auto ne travaillait pas pour moi sur ce projet en utilisant 4.1.

Dominic Davies
la source
-1

Trouvez la ligne 69 dans le verndor-prefixes.less et écrivez-la comme suit:

.panel {
    margin-bottom: 20px;
    height: 100px;
    background-color: #fff;
    border: 1px solid transparent;
    border-radius: 4px;
    -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05);
    box-shadow: 0 1px 1px rgba(0,0,0,.05);
}
Développer l'extrait

Paul
la source
-2

Je viens de le copier depuis l'une des pages getbootstrap de la version 4 publiée, qui fonctionnait beaucoup mieux que ci-dessus

<div class="d-none d-xl-block col-xl-2 bd-toc float-md-right">
    <ul class="section-nav">
         <li class="toc-entry toc-h2"><a href="#overview">Overview</a></li>
         <li class="toc-entry toc-h2"><a href="#classes">Classes</a></li>
         <li class="toc-entry toc-h2"><a href="#mixins">Mixins</a></li>
         <li class="toc-entry toc-h2"><a href="#responsive">Responsive</a></li>
    </ul>
</div>
Gary Molton
la source
-3

Je suis nouveau pour empiler les débordements et nouveau pour le développement frontal. C'est ce qui a fonctionné pour moi. Je ne voulais donc pas que les éléments de la liste soient affichés.

.hidden {
  display:none;
  } 
  
 #loginButton{
 
 margin-right:2px;
 
 }
<nav class="navbar navbar-toggleable-md navbar-light bg-faded fixed-top">
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href="#">NavBar</a>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active hidden">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item hidden">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item hidden">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit" id="loginButton"><a href="#">Log In</a></button>
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit"><a href="#">Register</a></button>
    </form>
  </div>
</nav>

MSangha
la source