Egal, was ich versuche, ich kann in Bootstrap-Navigationsleiste nichts zentrieren, keine Lösungen dafür?
Ich habe versucht, ein div hinzuzufügen, mit margin:0 auto;
oder margin-right:auto; margin-left:auto;
, center-block
-Klasse. Nichts funktioniert, warum ist es so schwer etwas zu erreichen, das so einfach ist, dass ich nicht verstehen kann, was ich falsch mache?
Hier ist der aktuelle Code:
<nav class="navbar navbar-fixed-top navbar-dark main-nav">
<div class="container">
<ul class="nav navbar-nav pull-left">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Download</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Register</a>
</li>
</ul>
<ul class="nav navbar-nav text-center">
<li class="nav-item"><a class="nav-link" href="#">Website Name</a></li>
</ul>
<ul class="nav navbar-nav pull-right">
<li class="nav-item">
<a class="nav-link" href="#">Rates</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Help</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
In Bootstrap 4 gibt es ein neues Dienstprogramm namens .mx-auto
. Sie müssen nur die Breite des zentrierten Elements angeben.
Ref: http://v4-alpha.getbootstrap.com/utilities/spacing/#horizontal-centering
Anders als Bass Jobsens Antwort, die ein relatives Zentrum zu den Elementen an beiden Enden darstellt, ist das folgende Beispiel absolut zentriert.
Hier ist der HTML-Code:
<nav class="navbar bg-faded">
<div class="container">
<ul class="nav navbar-nav pull-sm-left">
<li class="nav-item">
<a class="nav-link" href="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 3</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 4</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-logo mx-auto">
<li class="nav-item">
<a class="nav-link" href="#">Brand</a>
</li>
</ul>
<ul class="nav navbar-nav pull-sm-right">
<li class="nav-item">
<a class="nav-link" href="#">Link 5</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 6</a>
</li>
</ul>
</div>
</nav>
Und CSS:
.navbar-logo {
width: 90px;
}
Aktualisiert für Bootstrap 4.1 und höher
Bootstrap 4 Die Navbar verwendet nun Flexbox, sodass der Website Name
mit mx-auto
zentriert werden kann. Die Menüs auf der linken und rechten Seite erfordern keine Schwebekörper.
<nav class="navbar navbar-expand-md navbar-fixed-top navbar-dark bg-dark main-nav">
<div class="container">
<ul class="nav navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Download</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Register</a>
</li>
</ul>
<ul class="nav navbar-nav mx-auto">
<li class="nav-item"><a class="nav-link" href="#">Website Name</a></li>
</ul>
<ul class="nav navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Rates</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Help</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
Navbar-Center mit mx-auto
Demo
Wenn die Navbar nur einen einzigen navbar-nav
hat, kann justify-content-center
auch zum Zentrieren verwendet werden.
In der obigen Lösung ist der Website Name
zentriert relativ links und rechts navbar-nav
. Wenn also die Breite dieser benachbarten Navs unterschiedlich ist, wird Website Name
nicht mehr zentriert.
Um dieses Problem zu beheben, kann eine der Flexbox-Workarounds für absolute centering verwendet werden ...
Option 1 - Position verwenden: absolut;
Da die Verwendung der absoluten Positionierung in der Flexbox in Ordnung ist, können Sie diese Option für das zu zentrierende Objekt verwenden.
.abs-center-x {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
Navbar-Zentrum mit absoluter Position Demo
Option 2 - Flexbox-Verschachtelung verwenden
Schließlich besteht eine weitere Option darin, das zentrierte Element ebenfalls display:flexbox
und zentriert auszurichten. In diesem Fall muss jede Navbar-Komponente flex-grow:1
haben.
Seit Bootstrap 4 Beta ist die Navbar nun display:flex
. Bootstrap 4.1.0 enthält eine neue flex-fill
-Klasse, mit der jeder Nav-Abschnitt die Breite ausfüllt:
<nav class="navbar navbar-expand-sm navbar-dark bg-dark main-nav">
<div class="container justify-content-center">
<ul class="nav navbar-nav flex-fill w-100 flex-nowrap">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Download</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Register</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">More</a>
</li>
</ul>
<ul class="nav navbar-nav flex-fill justify-content-center">
<li class="nav-item"><a class="nav-link" href="#">Center</a></li>
</ul>
<ul class="nav navbar-nav flex-fill w-100 justify-content-end">
<li class="nav-item">
<a class="nav-link" href="#">Help</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
Navbar-Zentrum mit flexbox nesting Demo
Vor Bootstrap 4.1.0 können Sie die Flex-Fill-Klasse wie folgt hinzufügen ...
.flex-fill {
flex:1
}
Ab 4.1 ist flex-fill
in Bootstrap enthalten.
Bootstrap 4 Navbar-Center-Demos
Verbunden:
Wie zentriere ich Nav-Items in Bootstrap?
Bootstrap NavBar mit links, mittig oder rechts ausgerichteten Objekten
Versuche dies.
.nav-tabs > li{
float:none !important;
display:inline-block !important;
}
.nav-tabs {
text-align:center !important;
}
Ich hatte ein ähnliches Problem. Der Ankertext in meiner Bootstrap4-Navigationsleiste wurde nicht zentriert. Fügen Sie einfach text-center
in der Klasse des Ankers hinzu.
verwenden Sie mx-auto erledigt den Job
<ul class="navbar-nav mx-auto">
Siehe: https://stackoverflow.com/a/14146967/1596547 , jetzt können Sie verwenden:
<nav class="navbar navbar-light main-nav">
<div class="container text-xs-center">
<ul class="nav navbar-nav pull-xs-left">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Download</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Register</a>
</li>
</ul>
<ul class="nav navbar-nav" style="display: inline-block;">
<li class="nav-item"><a class="nav-link" href="#">Website Name</a></li>
</ul>
<ul class="nav navbar-nav pull-xs-right">
<li class="nav-item">
<a class="nav-link" href="#">Rates</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Help</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
wende text-xs-center
auf deinen Container an und setze display: inline-block;
für deine Liste.
aus den docs
Navbars können mithilfe von .navbar-text Textteile enthalten. Diese Klasse passt die vertikale Ausrichtung und den horizontalen Abstand für Textfolgen an.
ich habe die .navbar-text-Klasse auf mein <li>
-Element angewendet, das Ergebnis ist also
<li class="nav-item navbar-text">
dadurch werden die Links vertikal zu meiner Navbar-Marke img zentriert
mache einen neuen Stil
.container {
position: relative;
}
.center-nav {
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
width: auto;
max-width: 200px;
text-align: center;
}
.center-nav li{
text-align: center;
width:100%;
}
Ersetzen Sie den Website-Namen UL durch unten
<ul class="nav navbar-nav center-nav">
<li class="nav-item"><a class="nav-link" href="#">Website Name</a></li>
</ul>
Hoffe das hilft..