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

Bei der Arbeit mit der Twitter-Bootstrap-Navigationsleiste müssen Benutzer möglicherweise 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:

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

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:

    

        ....
    

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

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

Zusätzliche Überlegungen

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

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