Wie kann ich die Links in der Navigationsleiste von Twitter Bootstrap zentrieren?

Anpassen der Navigationsleiste von Twitter Bootstrap mit zentralisierten Links

Twitter Bootstrap bietet ein robustes Framework für die Erstellung responsiver Webdesigns, einschließlich einer vielseitigen Navigationsleistenkomponente. Wenn Sie jedoch von den standardmäßig linksbündigen Links in der Navigationsleiste abweichen möchten, müssen Sie einige CSS-Anpassungen vornehmen.

Lösung 1: Verwendung von .tabs und .pills

In einem früheren Beitrag haben Sie versucht, die Links mithilfe von .tabs und .pills zu zentrieren. Dieser Ansatz hat jedoch nicht funktioniert, da Bootstrap diese Stile speziell auf Navigationsregisterkarten und Paginierungssteuerelemente anwendet, nicht auf die primäre Navigationsleiste.

Lösung 2: Anpassen von .nav- und .navbar-inneren Klassen

Um die Navigationsleisten-Links zu zentralisieren, besteht der richtige Ansatz darin, die Stile für .nav, das die Links enthält, und .navbar-inner, das die Gesamtausrichtung der Navigationsleiste festlegt, zu ändern. Hier ist das aktualisierte 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>

Dieses CSS überschreibt die Standardstile und sorgt dafür, dass die Navigationsleisten-Links horizontal zentriert angezeigt werden.

Verwendung einer benutzerdefinierten Klasse für gezielte Anpassung

Um Auswirkungen auf andere Navigationselemente auf Ihrer Seite zu vermeiden, können Sie eine benutzerdefinierte Klasse für Ihre Ziel-Navigationsleiste erstellen. Zum Beispiel:

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

Dann können Sie das folgende CSS auf diese benutzerdefinierte Klasse anwenden:

<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üelemente ausrichten

Danach Denken Sie beim Zentrieren der Navigationsleisten-Links daran, die Untermenüelemente links neu auszurichten. Verwenden Sie dieses zusätzliche CSS:

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

Diese Änderungen zentrieren die Navigationsleisten-Links erfolgreich, ohne die Funktionalität oder das Design anderer Navigationselemente zu beeinträchtigen.

Das obige ist der detaillierte Inhalt vonWie kann ich die Links in der Navigationsleiste von Twitter Bootstrap zentrieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!