Modification de la barre de navigation Twitter Bootstrap pour centrer les liens

Lorsqu'ils travaillent avec la barre de navigation Twitter Bootstrap, les utilisateurs peuvent rencontrer le besoin d'aligner les liens de navigation de manière centrale, plutôt que l'alignement par défaut à gauche . Pour y parvenir, effectuez les personnalisations suivantes à l'aide de la feuille de style CSS.

Solution

Pour centrer les liens de navigation dans la barre de navigation, implémentez le code CSS suivant :

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

Approche alternative

Pour conserver les valeurs par défaut de Bootstrap et cibler un menu de barre de navigation spécifique, créez une classe personnalisée et appliquez-la au conteneur de la barre de navigation :

    

        ....
    

Ensuite, ciblez la classe .center dans la feuille de style 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;
}

Considérations supplémentaires

Pour aligner les éléments du sous-menu à gauche, ajoutez la règle CSS suivante :

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