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.
<div>
um den <ul>
mit dem Attribut: style="float: right"
<div>
um den <ul>
mit dem Attribut: style="text-align: right"
<li>
-Tags!important
am Endenav-item
in nav-right
im <li>
geändertpull-sm-right
-Klasse zum <li>
hinzualign-content-end
-Klasse zum <li>
hinzu<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 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-nav
s, 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>
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
Verwandte Themen: Bootstrap NavBar mit links, mittig oder rechts ausgerichteten Objekten
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 .
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">
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
.
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">
Verwenden Sie ml-auto
anstelle von mr-auto
, nachdem Sie nav
justify-content-end auf die ul
angewendet haben.
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>
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>
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>
Verwenden Sie diesen Code, um Elemente nach rechts zu verschieben.
div class="collapse navbar-collapse justify-content-end"
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>
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>
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>
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
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.