Bootstrap 4 richtet die Navigationsleistenelemente rechts aus

340

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>

— Luuk Wuijster
quelle

Navbars werden mit Flexbox aus der Alpha 6-Version gebaut.

— Max

1

Ja, was muss ich tun, damit es rechts ausgerichtet wird? Ich habe schon ein paar Flexbox-Sachen ohne Glück ausprobiert. : /

— Luuk Wuijster

526

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>

Update für Bootstrap 4.0 und neuer

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

— Zim
quelle

1

mr-autofunktioniert nicht, wenn das am weitesten rechts stehende Element a ist dropdown. Die Dropdown-Elemente werden über den rechten Rand der Seite verteilt.

— Ege Ersoz

6

Es funktioniert: codeply.com/go/P0G393rzfm - das Problem ist nicht, mr-autoda es um die Ausrichtung der richtigen Funktion geht. Stellen Sie eine neue Frage, wenn Sie Bedenken bezüglich des Dropdowns haben, sich aber höchstwahrscheinlich auf dieses Problem beziehen

— Zim

2

Sie können auch .dropdown-menu-rightrechtsbündige Dropdowns in der Navigationsleiste hinzufügen. Andernfalls kann das Dropdown-Menü bei bestimmten Breiten abgeschnitten werden.

— Rybo111

@ZimSystem Vielen Dank für Ihre Antworten. Ich habe Ihre Antwort hier verfolgt . Stackoverflow.com/questions/19733447/… . Ich habe eine Frage, wie ich einen Artikel auf der linken Seite und einen Artikel auf der rechten Seite erreichen kann.

— Lokesh Pandey

In codeply.com/go/P0G393rzfm haben Sie links eine ul und rechts eine ul angezeigt. Dies wurde erreicht, indem mr-auto zum ersten hinzugefügt wurde . Aber was ist, wenn ich nur eine Ul habe? Ich möchte keine leere ul erstellen, nur um eine andere rechts auszurichten.

— Santosh Kumar

140

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 .

— Craig van Tonder
quelle

3

@numediaweb Im OPs-Beispiel verwendet er zwei Elemente innerhalb der Navigation, wobei eines links und eines rechts ausgerichtet wird. wo ich nur eine verwendet und rechts ausgerichtet habe. Es ist nicht die richtige Antwort, aber es ist hilfreich als Antwort auf eine leichte Variation der Frage;)

— Craig van Tonder

Dies funktioniert für eine einzelne Navbar-Navigation, die mr-autoMethode wird jedoch in den Bootstrap-Dokumenten verwendet .

— Zim

mr-autowird in Dokumenten verwendet, jedoch nicht zum Ausrichten von Elementen nach links. Diese Antwort ist semantisch korrekt, wie in diesem Artikel erwähnt: blog.getbootstrap.com/2017/01/06/bootstrap-4-alpha-6

— qwaz

Die Frage ist, ob Sie versuchen, 2 Liste von Links oder 1 auszurichten. Wenn nur 1, funktioniert Ihre Antwort und war für mich sehr hilfreich. Vielen Dank!

— barefootsanders

Es hat bei mir funktioniert, aber ich weiß nicht, warum die über dieser Antwort nicht funktioniert.

— Suhail Akhtar

59

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

— Muhammad Tarique
quelle

7

Nein - das richtet alles nach rechts aus. Die Frage besagt, dass er nur ein einzelnes Element rechts ausrichten möchte.

— NickG

2

Überprüfen Sie das offizielle Dokument darüber m*-auto, verschiebt den Inhalt nach links oder rechts, je nachdem, wo Sie die Klasse platzieren

— Pierre de LESPINAY

@PierredeLESPINAY, ja ml-auto, der Inhalt wird ganz nach rechts verschoben, aber ich habe mich nur gefragt, warum mr-0ich den Job nicht machen kann.

— Avocado

42

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

— Geet Sebastian
quelle

32

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.

— ClemC
quelle

1

Hat wunderbar für mich gearbeitet. Sonst nichts.

— Maria Campbell

14

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

— James Pike
quelle

9

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

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

— Maijied Hasan Shuvo
quelle

1

Dies funktioniert nicht, wenn Sie ein reduziertes Menü haben. Mit dem ml-auto funktioniert es jedoch weiterhin, da die <li> -Elemente beim Reduzieren des Menüs immer noch 100% der Breite einnehmen, sodass kein Rand angewendet wird.

— Ryan S

8

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>

— J Kennedy
quelle

7

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>

— SKL
quelle

5

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>

— mubsher
quelle

2

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

in navbar-navKlasse add w-100als navbar-nav w-100machen Breite als 100
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>

— Anand Raja
quelle

2

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>

— Ajay Kumar
quelle

2

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

— Mohit Prajapati
quelle

0

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>

— GrettyGoose
quelle

0

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>

— Kaczor
quelle

0

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

— maro
quelle

0

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>

— Belgoros
quelle

0

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.

— Dominic Davies
quelle

-1

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

Erweitern Sie das Snippet

— Paul
quelle

-2

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>

— Gary Molton
quelle

-3

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>

— MSangha
quelle