Wie zentriere ich Twitter-Bootstrap-Navbar-Links?

Zentralisierung von Twitter Bootstrap-Navigationsleisten-Links

Bei dem Versuch, die Links in der Twitter Bootstrap-Navigationsleiste zentriert auszurichten, stieß ein Benutzer auf Herausforderungen bei der Implementierung Empfohlenes CSS:

.tabs, .pills {
  margin: 0 auto;
  padding: 0;
  width: 100px;
}

Es gibt jedoch alternative Lösungen.

Ansatz 1: Inline-Block-Anzeige

Zentrierte Menüelemente können durch erreicht werden Setzen Sie die Anzeigeeigenschaft sowohl der Navigationsleiste als auch ihrer Li-Elemente auf Inline-Block, um sicherzustellen, dass sie nebeneinander ohne Float angezeigt werden.

.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;
}

Ansatz 2: Benutzerdefinierte Klasse

Alternativ kann die Anwendung einer benutzerdefinierten Klasse wie „center“ potenzielle Konflikte mit anderen Seitenabschnitten verhindern.

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

Und das entsprechende 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;
}

Untermenü-Ausrichtungskorrektur

Um die Untermenüelemente schließlich links neu auszurichten, ist das folgende CSS erforderlich:

.center .dropdown-menu {
    text-align: left;
}

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