Heim  >  Artikel  >  Web-Frontend  >  Wie zentriere ich Twitter Bootstrap Navbar-Navigationslinks?

Wie zentriere ich Twitter Bootstrap Navbar-Navigationslinks?

Susan Sarandon
Susan SarandonOriginal
2024-11-01 10:53:02929Durchsuche

How to Center Twitter Bootstrap Navbar Navigation Links?

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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn