web-dev-qa-db-fra.com

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

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

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

 Picture of Navbar

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

  • <div> autour du <ul> avec l'attribut: style="float: right"
  • <div> autour du <ul> avec l'attribut: style="text-align: right"
  • essayé ces deux choses sur les tags <li>
  • a essayé toutes ces choses encore avec !important ajouté à la fin
  • changé nav-item en nav-right dans le <li>
  • ajouté une classe pull-sm-right au <li>
  • ajouté une classe align-content-end au <li>

Ceci est 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>
csstwitter-bootstrapflexboxbootstrap-4navbar
204
Luuk Wuijster

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

Vous pouvez utiliser le nouveau mr-auto pour la marge droite automatique sur le 1er (à gauche) navbar-nav. Alternativement, ml-auto peut être utilisé sur le 2nd (à droite) navbar-nav, ou si vous n’avez qu’un seul navbar-nav.

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

http://www.codeply.com/go/P0G393rzfm

Il existe également des utilitaires flexbox. Dans ce cas, vous avez 2 navbar-navs, donc justify-content-between dans navbar-collapse fonctionnerait 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 versions ultérieures

À partir de la version bêta de Bootstrap 4, ml-auto fonctionnera toujours pour pousser les éléments vers la droite. Sachez simplement que les classes navbar-toggleable- ont été changées en navbar-expand-*

Mise à jour barre de navigation à droite pour Bootstrap 4

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

Bouton d'alignement droit toujours visible

 enter image description here

 enter image description here

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

341
Zim

Dans mon cas, je voulais juste un ensemble de boutons/options de navigation et 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 allez ajouter justify-content-end à la division et omettre mr-auto dans la liste.

Voici un exemple de travail .

99
Craig van Tonder

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

<ul class="navbar-nav ml-auto">
29
Muhammad Tarique

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

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

25
ClemC

Sur Bootstrap 4

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

<ul class="navbar-nav ml-auto">
20
geet Sebastian

Utilisez ml-auto au lieu de mr-auto après avoir appliqué nav justifier-contenu-end à la ul

11
James Pike

Si vous voulez Accueil, Caractéristiques et Prix à gauche juste après votre nav-brand, puis vous connecter et vous enregistrer à droite, placez les deux listes dans <div> et utilisez .justify-content-between:

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

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

Il suffit d'ajouter la classe mr-auto à ul

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

Si vous avez une liste de menus dans les 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>
2
SKL

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

div class="collapse navbar-collapse justify-content-end"
2
Maijied Hasan Shuvo

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

Je suis en train d'exécuter Angular 4 (v.4.0.0) et ng-bootstrap (Bootstrap 4). Ce code ne sera pas toujours pertinent, mais nous espérons que les gens pourront choisir ce qui fonctionne. Il m'a fallu un certain temps pour trouver une solution permettant de justifier correctement mon repliement et de mettre en place un menu déroulant à partir de ma photo de profil Google (avec 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>
0
GrettyGoose

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

L’utilisation de la boîte souple bootstrap aide, pour le problème ci-dessus, à contrôler le placement et l’alignement de votre élément de navigation. 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>

autre placement peut inclure 

fixed- top
    fixed bottom
    sticky-top
0
maro

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

0
Dominic Davies