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

Modifier la barre de navigation Bootstrap Twitter : centrage des liens de navigation

La barre de navigation Twitter Bootstrap offre une solution pratique pour la navigation sur les sites Web. Cependant, vous souhaiterez parfois personnaliser son apparence, comme centrer les liens de navigation.

Problème : Centrage des liens de navigation

La modification de l'alignement de la barre de navigation nécessite du code CSS. Cependant, certaines méthodes peuvent ne pas donner le résultat souhaité. Explorons la bonne approche.

Solution : disposition des blocs en ligne et alignement du texte

Pour centrer les éléments du menu de navigation, définissez leur propriété d'affichage sur inline-block au lieu de float : left. Cela permettra aux éléments d’être alignés horizontalement sans casser la mise en page. De plus, définissez la propriété text-align du conteneur interne de la barre de navigation sur center.

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

Ciblage d'instances de barre de navigation spécifiques

Si vous avez plusieurs barres de navigation sur votre page Web, il est recommandé de créer une classe CSS dédiée pour cibler la barre de navigation spécifique que vous souhaitez centrer. Cela évitera les effets indésirables sur d'autres barres de navigation.

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

<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 éléments de sous-menu

Il convient de noter que le CSS ci-dessus affectera également les éléments de sous-menu, les obligeant également à être centrés. . Si vous préférez que les éléments de sous-menu soient alignés à gauche, ajoutez le style suivant :

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

Démo

Voir une démo en direct sur : http://jsfiddle.net/C7LWm/show /

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!