Wie zentriere ich Twitter Bootstrap Navbar-Navigationslinks?

Twitter Bootstrap Navbar ändern: Navigationslinks zentrieren

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.

Problem: 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.

Lösung: Inline-Block-Layout und Textausrichtung

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>

Targeting auf bestimmte Navbar-Instanzen

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>

Ausrichten von Untermenüelementen

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>

Demo

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!