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

Modification de la barre de navigation de Twitter Bootstrap

La barre de navigation de Twitter Bootstrap est un composant polyvalent qui peut être personnalisé pour s'adapter à différentes mises en page. Cet article montre comment centrer les liens dans la barre de navigation, en répondant à une demande courante des utilisateurs.

Problème : liens mal alignés dans la barre de navigation

À l'origine, les liens dans la barre de navigation étaient alignés à gauche, malgré le résultat souhaité de l’alignement central. Les tentatives d'utilisation de règles CSS préexistantes n'ont pas donné le résultat souhaité.

Solution : affichage en ligne et alignement du texte centré

Pour centrer les liens de la barre de navigation, nous devons définir la propriété d'affichage du liens vers inline-block et la propriété text-align du conteneur de la barre de navigation au centre. Voici le CSS modifié :

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

Classe personnalisée pour modification ciblée

Pour éviter les modifications indésirables d'autres sections de navigation, il est conseillé de créer une classe personnalisée ciblant le menu de la barre de navigation souhaité. Par exemple, nous pouvons créer une classe appelée "center":

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

Ensuite, nous pouvons cibler cette classe dans notre 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>

Alignement des sous-menus

Après avoir centré les liens principaux, il peut être nécessaire de réaligner les éléments du sous-menu vers la gauche s'ils ont été affectés par les modifications. Ceci peut être réalisé avec du CSS supplémentaire :

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

Démonstration en direct

Une démonstration en direct de cette solution peut être trouvée ici : http://jsfiddle.net/C7LWm/7/.

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!