Bootstrap 4 richtet die Navigationsleistenelemente rechts aus

Wie richte ich ein Navigationsleistenelement nach rechts aus?

Ich möchte das Login haben und mich rechts registrieren. Aber alles, was ich versuche, scheint nicht zu funktionieren.

Folgendes habe ich bisher versucht:

• <div>um die <ul>mit dem atribute:style="float: right"
• <div>um die <ul>mit dem atribute:style="text-align: right"
• versuchte diese beiden Dinge auf den <li>Tags
• versuchte all diese Dinge noch einmal mit !importantam Ende hinzugefügt
• geändert nav-itemzu nav-rightin der<li>
• fügte der pull-sm-rightKlasse eine Klasse hinzu<li>
• fügte der align-content-endKlasse eine Klasse hinzu<li>

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>

Bootstrap 4 bietet viele verschiedene Möglichkeiten zum Ausrichten von Navigationsleistenelementen . float-rightfunktioniert nicht, weil die Navigationsleiste jetzt ist flexbox.

Sie können mr-autofür den automatischen rechten Rand am 1. (links) verwenden navbar-nav. Alternativ , ml-autoauf die verwendet werden könnte , 2. (rechts) navbar-nav, oder wenn Sie nur ein einziges haben 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

Es gibt auch Flexbox-Utensilien. In diesem Fall haben Sie 2 navbar-navs, so dass justify-content-betweenin navbar-collapseden gleichmäßigen Abstand zwischen ihnen arbeiten würde,

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

Ab Bootstrap 4 Beta ml-autowerden weiterhin Elemente nach rechts verschoben. Beachten Sie nur, dass sich die navbar-toggleable-Klassen geändert habennavbar-expand-*

Aktualisierte Navigationsleiste rechts für Bootstrap 4

Ein weiteres häufiges Szenario für die Ausrichtung der rechten Bootstrap 4-Navigationsleiste umfasst eine Schaltfläche auf der rechten Seite, die außerhalb des mobilen Kollaps- Navigationsgeräts verbleibt, sodass sie immer in allen Breiten angezeigt wird.

Rechtsausrichtungstaste, die immer sichtbar ist

Verwandte: Bootstrap NavBar mit links, mittig oder rechts ausgerichteten Elementen

In meinem Fall wollte ich nur einen Satz Navigationsschaltflächen / -optionen und stellte fest, dass dies funktioniert:

<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 werden also justify-content-endzum div hinzufügen und mr-autoin der Liste weglassen .

Hier ist ein Arbeitsbeispiel .

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

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

Auf Bootstrap 4

Wenn Sie die Marke links und alle Navigationsleistenelemente rechts ausrichten möchten, ändern Sie die Standardeinstellung mr-autoinml-auto

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

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

Getbootstrap.com richtet sein Recht navbar-navmit Hilfe der folgenden Klasse nach rechts aus : ml-md-auto.

Verwenden Sie ml-autostatt mr-autonach dem Anwenden von " navRechtfertigungsinhalt" auf dasul

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

<div class="collapse navbar-collapse justify-content-end">

Wenn Sie Home, Features und Pricing unmittelbar nach Ihrem Link sehen möchten nav-brandund sich dann rechts anmelden und registrieren möchten, wickeln Sie die beiden Listen ein <div>und verwenden Sie .justify-content-between:

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

Fügen Sie einfach mr-autoKlasse hinzu bei ul:

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

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>

Boostrap 4 ändert sich kaum. Um die Navigationsleiste auf der rechten Seite auszurichten, müssen Sie nur zwei Änderungen vornehmen. Sie sind:

1. in navbar-navKlasse add w-100als navbar-nav w-100machen Breite als 100
2. in nav-item dropdownKlasse add ml-autoals nav-item dropdown ml-automachen Marge als Auto verlassen.

Wenn Sie nicht verstanden haben, beziehen Sie sich bitte auf das Bild, das ich diesem beigefügt habe.

CodePen Link

Vollständiger Quellcode

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

Für Bootstrap 4.3.1 habe ich Navi-Pillen verwendet und nichts hat für mich funktioniert, außer dies:

    <ul class="nav nav-pills justify-content-end ml-auto">
    <li ....</li>
    </ul>

In Bootstrap v4.3 fügen Sie einfach ml-autoin <ul class="navbar-nav"> Ex:<ul class="navbar-nav ml-auto">

Ich verwende Angular 4 (v.4.0.0) und ng-bootstrap (Bootstrap 4). Dieser Code ist nicht alle relevant, aber in der Hoffnung, dass die Leute auswählen können, was funktioniert. Es dauerte einige Zeit, bis ich eine Lösung gefunden hatte, um meine Artikel richtig zu rechtfertigen, richtig zu kollabieren und ein Dropdown-Menü für mein Google-Profilbild (mit 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>

Für Bootstrap 4 Beta lautet die Beispielnavigationsleiste mit Elementen, die auf der rechten Seite ausgerichtet sind:

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

Mithilfe der Bootstrap-Flexbox können wir die Platzierung und Ausrichtung Ihres Navigationselements steuern. Für das obige 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 umfassen

fixed- top
    fixed bottom
    sticky-top

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>

Wenn alles oben genannte fehlschlägt, habe ich der Navbar-Klasse in CSS 100% Breite hinzugefügt. Bis dahin hat Herr Auto bei diesem Projekt mit 4.1 nicht für mich gearbeitet.

Suchen Sie die Zeile 69 in den Verndor-Präfixen.less und schreiben Sie sie wie folgt:

.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);
}

Kopierte dies einfach von einer der getbootstrap-Seiten für die veröffentlichte Version 4, die viel besser funktionierte als die oben genannten

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

Ich bin neu im Stack-Überlauf und neu in der Front-End-Entwicklung. Das hat bei mir funktioniert. Daher wollte ich nicht, dass Listenelemente angezeigt werden.

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