Heim > Artikel > Web-Frontend > Wie zentriere ich Twitter Bootstrap Navbar-Navigationslinks?
Die Twitter Bootstrap Navbar bietet eine praktische Lösung für die Website-Navigation. Manchmal möchten Sie jedoch möglicherweise das Erscheinungsbild anpassen, z. B. die Navigationslinks zentrieren.
Das Ändern der Ausrichtung der Navigationsleiste erfordert etwas CSS-Code. Einige Methoden führen jedoch möglicherweise nicht zum gewünschten Ergebnis. Lassen Sie uns den richtigen Ansatz erkunden.
Um Navigationsmenüelemente zu zentrieren, setzen Sie ihre Anzeigeeigenschaft auf inline-block statt auf float: left. Dadurch können die Elemente horizontal ausgerichtet werden, ohne dass das Layout beschädigt wird. Stellen Sie außerdem die text-align-Eigenschaft des inneren Containers der Navigationsleiste auf „Mitte“ ein.
<code class="css">.navbar .nav, .navbar .nav > li { float: none; display: inline-block; *display: inline; /* ie7 fix */ *zoom: 1; /* hasLayout ie7 trigger */ vertical-align: top; } .navbar-inner { text-align: center; }</code>
Wenn Sie mehrere Navigationsleisten auf Ihrer Webseite haben, wird empfohlen, eine zu erstellen dedizierte CSS-Klasse, um auf die spezifische Navigationsleiste abzuzielen, die Sie zentrieren möchten. Dies verhindert unerwünschte Auswirkungen auf andere Navigationsleisten.
<code class="html"><div class="navbar navbar-fixed-top center"> <div class="navbar-inner"> .... </div> </div></code>
<code class="css">.center.navbar .nav, .center.navbar .nav > li { float: none; display: inline-block; *display: inline; /* ie7 fix */ *zoom: 1; /* hasLayout ie7 trigger */ vertical-align: top; } .center .navbar-inner { text-align: center; }</code>
Es ist erwähnenswert, dass sich das oben genannte CSS auch auf Untermenüelemente auswirkt, wodurch diese ebenfalls zentriert werden . Wenn Sie Untermenüelemente lieber linksbündig haben möchten, fügen Sie den folgenden Stil hinzu:
<code class="css">.center .dropdown-menu { text-align: left; }</code>
Eine Live-Demo finden Sie unter: http://jsfiddle.net/C7LWm/show /
Das obige ist der detaillierte Inhalt vonWie zentriere ich Twitter Bootstrap Navbar-Navigationslinks?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!