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

Centralisation des liens de la barre de navigation de Twitter Bootstrap

Dans une tentative d'aligner les liens de la barre de navigation de Twitter Bootstrap sur le centre, un utilisateur a rencontré des difficultés pour mettre en œuvre le CSS suggéré :

.tabs, .pills {
  margin: 0 auto;
  padding: 0;
  width: 100px;
}

Cependant, des solutions alternatives existent.

Approche 1 : affichage en bloc en ligne

Les éléments de menu centrés peuvent être obtenus en définir la propriété d'affichage de la barre de navigation et de ses éléments li sur inline-block, en garantissant qu'ils apparaissent côte à côte sans aucun flottant.

.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 2 : Classe personnalisée

Alternativement, l'application d'une classe personnalisée, telle que « center », peut éviter des conflits potentiels avec d'autres sections de page.

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

Et le CSS correspondant :

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

Correction de l'alignement du sous-menu

Enfin, pour réaligner les éléments du sous-menu à gauche, le CSS suivant est requis :

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

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!