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

Personnalisation de la barre de navigation de Twitter Bootstrap avec des liens centralisés

Twitter Bootstrap fournit un cadre robuste pour créer des conceptions Web réactives, y compris un composant de barre de navigation polyvalent. Cependant, si vous souhaitez vous écarter des liens alignés à gauche par défaut dans la barre de navigation, vous devez effectuer quelques ajustements CSS.

Solution 1 : Utiliser .tabs et .pills

Dans un article précédent, vous avez tenté de centrer les liens à l'aide de .tabs et .pills. Cependant, cette approche n'a pas fonctionné car Bootstrap applique ces styles spécifiquement aux onglets de navigation et aux contrôles de pagination, et non à la barre de navigation principale.

Solution 2 : personnalisation des classes internes .nav et .navbar

Pour centraliser les liens de la barre de navigation, la bonne approche consiste à modifier les styles du .nav, qui contient les liens, et .navbar-inner, qui définit l'alignement global de la barre de navigation. Voici le CSS mis à jour :

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

Ce CSS remplacera les styles par défaut et entraînera l'affichage des liens de la barre de navigation centrés horizontalement.

Utilisation d'une classe personnalisée pour une personnalisation ciblée

Pour éviter d'affecter d'autres éléments de navigation sur votre page, vous pouvez créer une classe personnalisée pour votre barre de navigation cible. Par exemple :

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

Ensuite, vous pouvez appliquer le CSS suivant à cette classe personnalisée :

<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

Après En centrant les liens de la barre de navigation, n'oubliez pas de réaligner les éléments du sous-menu vers la gauche. Utilisez ce CSS supplémentaire :

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

Ces modifications centreront avec succès les liens de la barre de navigation sans compromettre la fonctionnalité ou le style des autres éléments de navigation.

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!