Update 2019
Bootstrap 4
Jetzt, da Bootstrap 4 über eine Flexbox verfügt, ist die Navbar-Ausrichtung viel einfacher. Hier finden Sie aktualisierte Beispiele für links , rechts und mittig in der Bootstrap 4-Navigationsleiste sowie viele andere hier gezeigte Ausrichtungsszenarien .
Die Dienstprogrammklassen Flexbox , Auto-Ränder und Reihenfolge können verwendet werden, um den Navbar-Inhalt nach Bedarf auszurichten. Es gibt viele Dinge zu beachten, einschließlich der Reihenfolge und Ausrichtung der Navbar-Elemente (Marke, Links, Togler) sowohl auf großen Bildschirmen als auch in den mobilen / reduzierten Ansichten. Verwenden Sie nicht die Rasterklassen (Zeile, Spalte) für die Navigationsleiste .
Hier sind verschiedene Beispiele ...
Links, Mitte (Marke) und rechts Links:
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<div class="navbar-collapse collapse w-100 order-1 order-md-0 dual-collapse2">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Left</a>
</li>
<li class="nav-item">
<a class="nav-link" href="//codeply.com">Codeply</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
<div class="mx-auto order-0">
<a class="navbar-brand mx-auto" href="#">Navbar 2</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".dual-collapse2">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="navbar-collapse collapse w-100 order-3 dual-collapse2">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">Right</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</nav>
http://www.codeply.com/go/qhaBrcWp3v
Eine weitere BS4 Navbar-Option mit Center-Links und Overlay-Logo :
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="navbar-collapse collapse w-100 dual-collapse2 order-1 order-md-0">
<ul class="navbar-nav ml-auto text-center">
<li class="nav-item active">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
<div class="mx-auto my-2 order-0 order-md-1 position-relative">
<a class="mx-auto" href="#">
<img src="//placehold.it/120/ccff00" class="rounded-circle">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".dual-collapse2">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="navbar-collapse collapse w-100 dual-collapse2 order-2 order-md-2">
<ul class="navbar-nav mr-auto text-center">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</nav>
Oder diese anderen Bootstrap 4-Ausrichtungsszenarien:
Marke links, Totpunkt-Links, (rechts leer)
Marken- und Linkmitte, Symbole links und rechts
Weitere Bootstrap 4-Beispiele :
Togler links auf dem Handy, Marke rechts in der
Mitte Marke und Links auf dem Handy
rechts Links auf dem Desktop ausrichten, Links in der Mitte auf dem Handy
links Links & Togler, Mitte Marke, Suche rechts
Siehe auch: Bootstrap 4-
Navigationsleistenelemente rechts ausrichten Bootstrap 4-Navigationsleiste rechts mit der Schaltfläche ausrichten, die auf dem Handy nicht zusammenfällt.
Zentrieren Sie ein Element in der Bootstrap 4-Navigationsleiste
Bootstrap 3
Option 1 - Markenzentrum mit Links- / Rechtsnavigationslinks:
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<a class="navbar-brand" href="#">Brand</a>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-left">
<li><a href="#">Left</a></li>
<li><a href="#about">Left</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#about">Right</a></li>
<li><a href="#contact">Right</a></li>
</ul>
</div>
</nav>
.navbar-brand
{
position: absolute;
width: 100%;
left: 0;
text-align: center;
margin:0 auto;
}
.navbar-toggle {
z-index:3;
}
http://bootply.com/98314 (3.x)
Option 2 - Links-, Mittel- und Rechtsnavigationsverbindungen:
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="#">Left</a></li>
</ul>
<ul class="nav navbar-nav navbar-center">
<li><a href="#">Center</a></li>
<li><a href="#">Center</a></li>
<li><a href="#">Center</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Right</a></li>
</ul>
</div>
</nav>
@media (min-width: 768px) {
.navbar-nav.navbar-center {
position: absolute;
left: 50%;
transform: translatex(-50%);
}
}
http://www.bootply.com/SGYC6BWeBK
Option 3 - Zentrieren Sie sowohl die Marke als auch die Links
.navbar .navbar-header,
.navbar-collapse {
float:none;
display:inline-block;
vertical-align: top;
}
@media (max-width: 768px) {
.navbar-collapse {
display: block;
}
}
http://www.codeply.com/go/1lrdvNH9GI
Mehr Beispiele:
Linke Marke, mittlere Links
Linker Toggler, mittlere Marke
Für 3.x siehe auch nav-gerechtfertigt: Bootstrap Center Navbar
Navigationsleiste in Bootstrap zentrieren
Bootstrap 4 richtet die Navigationsleistenelemente rechts aus
.absKlasse bewirkt, dass dasnavbar-brandElement die Schaltflächen links und rechts abdeckt, sodass sie nicht mehr angeklickt werden könnenBootstrap 4
Wir haben viele Möglichkeiten, navBars-Elemente auszurichten.
Für Linksausrichtung
Für die richtige Ausrichtung
Für Center Align
quelle
Ich brauchte etwas Ähnliches (links, mittig und rechts ausgerichtete Elemente), aber mit der Fähigkeit, zentrierte Elemente als aktiv zu markieren. Was für mich funktioniert hat war:
http://www.bootply.com/CSI2KcCoEM
CSS:
quelle
Bootstrap 4 (ab Alpha 6)
Für Align Right verwenden Sie
justify-content-enddascollapsediv:Vollständiges Beispiel hier: https://jsbin.com/kemawa/edit?output
quelle
Schlag mir auf den Kopf, lies einfach meine Antwort noch einmal und stellte fest, dass das OP nach zwei Logos fragte, eines links und eines rechts mit einem mittleren Menü, nicht umgekehrt.
Dies kann ausschließlich im HTML-Code erreicht werden, indem Bootstraps "navbar-right" und "navbar-left" für die Logos und dann "nav-gerechtfertigt" anstelle von "navbar-nav" für Ihre UL verwendet werden. Es wird kein zusätzliches CSS benötigt (es sei denn, Sie möchten den Schalter zum Umschalten der Navigationsleiste in der Mitte des xs-Ansichtsfensters platzieren, müssen Sie ein wenig überschreiben, dies bleibt Ihnen jedoch überlassen).
Bootply: http://www.bootply.com/W6uB8YfKxm
Für diejenigen, die hierher gekommen sind und versucht haben, die "Marke" hier zu zentrieren, ist meine alte Antwort:
Ich weiß, dass dieser Thread ein wenig alt ist, aber nur um meine Ergebnisse zu veröffentlichen, wenn ich daran arbeite. Ich beschloss, meine Lösung auf Skellys Antwort zu stützen, da tomaszbaks Pausen auf Collaspe beruhten. Zuerst habe ich mein "navbar-center" erstellt und float für die normale navbar in meinem CSS deaktiviert:
Das Problem mit der Antwort von skelly ist jedoch, dass wenn Sie einen wirklich langen Markennamen haben (oder ein Bild für Ihre Marke verwenden möchten), es beim Erreichen des sm-Ansichtsfensters aufgrund der absoluten Position und wie bei den Kommentatoren zu Überlappungen kommen kann sagte, sobald Sie das xs-Ansichtsfenster erreicht haben, bricht der Kippschalter (es sei denn, Sie verwenden die Z-Positionierung, aber ich wollte mich wirklich nicht darum kümmern müssen).
Ich habe also die auf Bootstrap reagierenden Dienstprogramme verwendet , um mehrere Versionen des Markenblocks zu erstellen:
Jetzt haben die lg- und md-Ansichtsfenster die Marke mit Links nach links und rechts zentriert. Sobald Sie das sm-Ansichtsfenster erreicht haben, werden Ihre Links in die nächste Zeile verschoben, damit Sie sich nicht mit Ihrer Marke überschneiden, und schließlich an den xs Im Ansichtsfenster wird die Kollaspe aktiviert und Sie können den Umschalter verwenden. Sie können noch einen Schritt weiter gehen und die Medienabfragen für navbar-right und navbar-left ändern, wenn sie mit navbar-brand verwendet werden, sodass die Links im sm-Ansichtsfenster alle zentriert sind, aber nicht die Zeit hatten, sie zu überprüfen.
Sie können meine alte Bootply hier überprüfen: www.bootply.com/n3PXXropP3
Ich denke, 3 Marken zu haben ist vielleicht genauso mühsam wie das "z", aber ich denke, in der Welt des reaktionsschnellen Designs passt diese Lösung besser zu meinem Stil.
quelle
Ich fand, dass das Folgende eine bessere Lösung ist, abhängig vom Inhalt Ihrer linken, mittleren und rechten Elemente. Eine Breite von 100% ohne Rand verursachte eine Überlappung der Divs und verhinderte, dass Ankertags korrekt funktionierten - das heißt, ohne die unordentliche Verwendung von Z-Indizes.
quelle
Dies ist eine veraltete Frage, aber ich habe eine alternative Lösung gefunden, die ich direkt von der Bootstrap-Github-Seite aus teilen kann. Die Dokumentation wurde nicht aktualisiert und es gibt andere Fragen zu SO, die nach derselben Lösung fragen, wenn auch zu leicht unterschiedlichen Fragen. Diese Lösung ist nicht spezifisch für Ihren Fall, aber wie Sie sehen, ist die Lösung die
<div class="container">richtige<nav class="navbar navbar-default navbar-fixed-top">, kann aber bei Bedarf auch durch eine andere ersetzt werden<div class="container-fluid".Die Lösung wurde auf einer Geige auf dieser Seite gefunden: https://github.com/twbs/bootstrap/issues/18362
und wird in V3 als nicht behoben aufgeführt.
quelle
Platzieren Sie die Felder, die Sie zentrieren möchten, rechts oder links entsprechend der obigen Unterteilung.
quelle
Sie setzen den Rand links auf auto -> ml-auto für den Abschnitt, den Sie nach rechts verschieben möchten.
quelle
Die einfachste Lösung:
Teilen Sie die
navbarSpalten einfach in Spalten auf: Wenn Sie beispielsweise insgesamt 24 Spalten haben, sind 12 leer und 12 enthalten die Navigationsleiste:quelle