web-dev-qa-db-fra.com

Centre Navbar dans Twitter Bootstrap 2.0

Supposons que nous ayons le balisage suivant pour la barre de navigation utilisant Twitter Bootstrap 2.0.

<div class="navbar navbar-fixed-top">
  <div class="navbar-inner pull-center">
      <ul class="nav">
      <li class="active"><a href="#">HOME</a></li>                        
      <li><a href="#contact">CONTACT</a></li>
      </ul>        
  </div>
</div>

Quelle est la meilleure façon de centrer .nav dans navbar-inner?

J'ai seulement ajouté mes propres styles CSS:

@media (min-width: 980px) {
    .pull-center {
        text-align: center;
    }
    .pull-center > .nav {
        float:none;
        display:inline-block;
        *display: inline; *zoom: 1;
        height: 32px;
    }
}
css3navigationtwitter-bootstrapresponsive-designcentering
23
opengrid

Remplacez la largeur du conteneur dans la barre de navigation de auto à 960px.

.navbar-inner .container {width:960px;}
5
James Lawruk

Pour l'aligner au centre avec une largeur dynamique, j'ai utilisé ce qui suit:

HTML:

<div class="navbar">
  <div class="navbar-inner">
    <ul class="nav">
      ....
    </ul>
  </div>
</div>

CSS:

.navbar .navbar-inner {
    text-align: center;
}
.navbar .navbar-inner .nav {
    float: none;
    display:inline-block;
}

Je ne l'ai pas testé, mais je suppose que seul display:inline-block; pourrait être un problème, qui est pris en charge par tous les navigateurs sauf IE7 et les versions antérieures.

http://caniuse.com/inline-block

4
Tim Baas
<div class="navbar navbar-fixed-top">
    <div class="navbar-inner">
        <div class="container">
            <ul class="nav">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>
    </div>
</div>
3
czlatea

Utiliser simplement la classe de conteneur selon http://Twitter.github.com/bootstrap/components.html#navbar est en train de centrer ma navigation; Cependant, il a une largeur fixe et le formatage est désactivé (la hauteur de la barre de navigation est augmentée et il est fort possible que quelque chose que je fais mal).

Il serait bien d’avoir le système de navigation centré sur une largeur fluide, basée sur un pourcentage, avec une largeur minimale, en fonction de la taille minimale de l’écran de périphérique pris en charge, et maintenant. (Je suis un débutant face aux requêtes des médias sensibles et c’est peut-être la meilleure alternative au pourcentage.)

Nous étudions toujours la largeur minimale et nowrap, mais une autre alternative à la largeur fixe de la classe de conteneur bootstrap consiste à ajouter un enfant de navbar-inner. J'aimerais savoir s'il existe une solution d'amorçage intégrée telle que les classes row-fluid et spanN, mais je n'ai pas réussi à la mettre correctement en forme dans le système de navigation.

<div style="margin-left: 15%; margin-right: 15%;">
1
s_t_e_v_e

J'ai trouvé cela utile et propre:

<div class="navbar navbar-fixed-top">
  <div class="container">
      <ul class="nav">
      <li class="active"><a href="#">HOME</a></li>                        
      <li><a href="#contact">CONTACT</a></li>
      </ul>        
  </div>
</div>

où, css est:

.container {left:auto;right:auto}

Cela centrera la div sur la base de la largeur de votre barre de navigation actuelle.

La réactivité est gérée séparément. 

0
Emiliano Poggi