Heim > Web-Frontend > CSS-Tutorial > Hauptteil

Wie zentriere ich Navigationslinks in der Twitter Bootstrap Navbar?

DDD
Freigeben: 2024-11-01 09:26:02
Original
1015 Leute haben es durchsucht

How to Center Navigation Links in Twitter Bootstrap Navbar?

Ändern der Twitter-Bootstrap-Navigationsleiste, um Links zu zentrieren

Beim Arbeiten mit der Twitter-Bootstrap-Navigationsleiste müssen Benutzer möglicherweise die Navigationslinks zentral ausrichten, statt wie standardmäßig links ausgerichtet . Um dies zu erreichen, nehmen Sie die folgenden Anpassungen mithilfe des CSS-Stylesheets vor.

Lösung

Um die Navigationslinks in der Navigationsleiste zu zentrieren, implementieren Sie den folgenden CSS-Code:

<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>
Nach dem Login kopieren

Alternativer Ansatz

Um die Bootstrap-Standardeinstellungen beizubehalten und auf ein bestimmtes Navigationsleistenmenü abzuzielen, erstellen Sie eine benutzerdefinierte Klasse und wenden Sie sie auf den Navigationsleistencontainer an:

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

Zielen Sie dann auf die .center-Klasse im CSS-Stylesheet:

<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>
Nach dem Login kopieren

Zusätzliche Überlegungen

Um Untermenüelemente linksbündig auszurichten, fügen Sie die folgende CSS-Regel hinzu:

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

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

Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!