wake-up-neo.com

Bootstrap 4 richtet die Navbar-Elemente nach rechts aus

Wie richte ich ein Navbar-Element nach rechts aus?

Ich möchte das Login und die Registrierung rechts ... Aber alles, was ich versuche, scheint nicht zu funktionieren.

 Picture of Navbar

Das habe ich bisher ausprobiert:

  • <div> um den <ul> mit dem Attribut: style="float: right"
  • <div> um den <ul> mit dem Attribut: style="text-align: right"
  • probierte diese beiden Dinge mit den <li>-Tags
  • versuchte alle diese Dinge noch einmal mit !important am Ende
  • nav-item in nav-right im <li> geändert
  • fügte eine pull-sm-right-Klasse zum <li> hinzu
  • fügte eine align-content-end-Klasse zum <li> hinzu

Das ist mein 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 hat viele verschiedene Möglichkeiten, Navbar-Elemente auszurichten . float-right funktioniert nicht, da die Navigationsleiste jetzt flexbox ist.

Sie können den neuen mr-auto für den automatischen rechten Rand am 1st (links) navbar-nav verwenden. Alternativ kann, ml-auto für 2nd (rechts) navbar-nav verwendet werden, oder wenn Sie nur einen einzelnen navbar-nav haben.

<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

Es gibt auch Flexbox-Utensilien. In diesem Fall haben Sie 2 navbar-navs, so dass justify-content-between in navbar-collapse den Abstand zwischen ihnen selbst bearbeitet,

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

Update für Bootstrap 4.0 und neuer

Ab Bootstrap 4 Beta funktioniert ml-auto weiterhin, um Elemente nach rechts zu schieben. Beachten Sie, dass sich die navbar-toggleable--Klassen in navbar-expand-* geändert haben.

navbar rechts für Bootstrap 4 aktualisiert

Ein weiteres häufiges Rechtsausrichtungsszenario für Bootstrap 4 Navbar enthält eine Schaltfläche auf der rechten Seite, die bleibt außerhalb des mobilen Zusammenbruchs nav, so dass es immer in allen Breiten angezeigt wird.

Rechte Ausrichtungsschaltfläche, die immer sichtbar ist

 enter image description here

 enter image description here

Verwandte Themen: Bootstrap NavBar mit links, mittig oder rechts ausgerichteten Objekten

341
Zim

In meinem Fall wollte ich nur einen Satz von Navigationsschaltflächen optionen und stellte fest, dass dies funktionieren wird:

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

Sie fügen also justify-content-end zum div hinzu und lassen mr-auto in der Liste aus.

Hier ist ein/- Arbeitsbeispiel .

99
Craig van Tonder

Für diejenigen, die immer noch mit diesem Problem in BS4 zu kämpfen haben, probieren Sie einfach den folgenden Code: 

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

Bei Bootsrap 4.0.0-beta.2 hat keine der hier aufgeführten Antworten für mich funktioniert. Schließlich gab mir die Bootstrap-Site die Lösung, nicht über ihr doc, sondern über ihren Seitenquellcode ...

Getbootstrap.com richtet ihr Recht navbar-nav mit Hilfe der folgenden Klasse rechts aus: ml-md-auto.

25
ClemC

Auf Bootstrap 4

Wenn Sie die Marke links und alle Navbar-Elemente rechts ausrichten möchten, ändern Sie den Standardcode mr-auto in ml-auto.

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

Verwenden Sie ml-auto anstelle von mr-auto, nachdem Sie nav justify-content-end auf die ul angewendet haben.

11
James Pike

Wenn Sie Home, Funktionen und Preise gleich nach dem nav-brand links anzeigen möchten, und sich rechts anmelden und registrieren, bündeln Sie die beiden Listen in <div> und verwenden Sie .justify-content-between

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

verwenden Sie die Flex-Row-Reverse-Klasse

<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

Fügen Sie einfach mr-auto class bei ul hinzu

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

Wenn Sie auf beiden Seiten eine Menüliste haben, können Sie Folgendes tun:

<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

Verwenden Sie diesen Code, um Elemente nach rechts zu verschieben.

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

Das Arbeitsbeispiel für 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

Ich verwende Angular 4 (v.4.0.0) und ng-bootstrap (Bootstrap 4). Dieser Code ist nicht alle relevant, aber die Hoffnung, dass die Leute wählen können, was funktioniert. Es dauerte einige Zeit, bis ich eine Lösung gefunden hatte, um meine Artikel richtig zu rechtfertigen, richtig zu reduzieren und ein Dropdown von meinem Google-Profil (mithilfe von OAuth) zu implementieren. 

<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

Für Bootstrap 4 Beta lautet die Beispiel-Navbar mit rechts ausgerichteten Elementen:

<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

Wenn Sie die Bootstrap-Flex-Box verwenden, hilft es __., Die Platzierung und Ausrichtung Ihres Navigationselements zu kontrollieren Für das oben genannte Problem ist das Hinzufügen von mr-auto eine bessere Lösung.

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

andere Platzierung kann einschließen 

fixed- top
    fixed bottom
    sticky-top
0
maro

Wenn alle oben genannten Angaben fehlschlagen, habe ich der Navbar-Klasse in CSS eine Breite von 100% hinzugefügt. Bis dahin hat mr auto bei diesem Projekt mit 4.1 nicht funktioniert.

0
Dominic Davies