Wie zentriere ich Navbar-Links in Twitter Bootstrap?

Ändern der Navigationsleiste von Twitter Bootstrap

Die Navigationsleiste von Twitter Bootstrap ist eine vielseitige Komponente, die an verschiedene Layouts angepasst werden kann. In diesem Artikel wird gezeigt, wie Sie die Links in der Navigationsleiste zentrieren und so auf eine häufige Benutzeranfrage eingehen.

Problem: Falsch ausgerichtete Links in der Navigationsleiste

Ursprünglich waren die Links in der Navigationsleiste trotz der Linksbündigkeit ausgerichtet gewünschtes Ergebnis der zentralen Ausrichtung. Versuche, bereits vorhandene CSS-Regeln zu verwenden, führten nicht zum gewünschten Ergebnis.

Lösung: Inline-Anzeige und zentrierte Textausrichtung

Um die Navigationsleisten-Links zu zentrieren, müssen wir die Anzeigeeigenschaft des festlegen Links zum Inline-Block und die text-align-Eigenschaft des Navigationsleistencontainers zur Mitte. Hier ist das geänderte CSS:

<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>

Benutzerdefinierte Klasse für gezielte Modifikation

Um unerwünschte Änderungen an anderen Navigationsabschnitten zu vermeiden, ist es ratsam, eine benutzerdefinierte Klasse zu erstellen, die auf das gewünschte Navigationsleistenmenü abzielt. Zum Beispiel können wir eine Klasse namens „center“ erstellen:

<code class="html"><div class="navbar navbar-fixed-top center">
     <div class="navbar-inner">
        ....
     </div>
</div></code>

Dann können wir diese Klasse in unserem CSS als Ziel festlegen:

<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>

Untermenüausrichtung

Nach der Zentrierung der Hauptlinks kann es erforderlich sein, die Untermenüpunkte nach links neu auszurichten, wenn sie von den Änderungen betroffen sind. Dies kann mit zusätzlichem CSS erreicht werden:

<code class="css">.center .dropdown-menu {
    text-align: left;
}</code>

Live-Demonstration

Eine Live-Demonstration dieser Lösung finden Sie hier: http://jsfiddle.net/C7LWm/7/.

Das obige ist der detaillierte Inhalt vonWie zentriere ich Navbar-Links in Twitter Bootstrap?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!