Comment centrer les liens de navigation dans la barre de navigation Twitter Bootstrap ?

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

Lorsqu'ils travaillent avec la barre de navigation Bootstrap de Twitter, les utilisateurs peuvent rencontrer le besoin d'aligner les liens de navigation de manière centrale, plutôt que l'alignement à gauche par défaut. . 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 :

<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>

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 :

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

Ensuite, ciblez la classe .center dans le Feuille de style CSS :

<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>

Considérations supplémentaires

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

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!