web-dev-qa-db-fra.com

Modifier la barre de navigation d'amorçage Twitter

J'ai essayé de modifier la barre de navigation bootstrap de Twitter, pour le moment tous les liens sont alignés sur la gauche, alors que ce que j'aimerais vraiment, c'est qu'ils soient centraux.

Dans un post différent, j'ai lu que vous utilisiez ceci

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

Mais cela n'a pas fonctionné pour moi

Qu'est-ce que j'ai besoin de changer dans le css pour que cela se produise, je comprends que j'ai mis le css modifié dans le bootstrap et les substitutions.

Toute aide appréciée

c'est mon balisage

layouts/application

<div class="navbar navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container-fluid">
      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      </a>

    <a class="brand">Newbridges</a>  

  <% if user_signed_in? %>
    <div class="nav-collapse">
      <ul class="nav ">
      <%= render "shared/navbarlogin" %>
    </div>

    <% else%>
    <div class="nav-collapse">
      <ul class="nav">

      <%= render "shared/navbar" %>
    </div>
    <% end %>

J'ai aussi essayé ça

.nav > li {
  float: none;
  display: inline-block;
  *display: inline;
  /* ie7 fix */
  zoom: 1;
  /* hasLayout ie7 trigger */
}
.nav {
  text-align: center;
}
cssruby-on-railstwitter-bootstrap
22
Richlewis

Vous pouvez centrer votre menu de navigation en définissant vos éléments de menu sur display:inline-block au lieu de float:left comme suit:

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

Bien que je vous suggère de créer votre propre classe pour cibler le menu de la barre de navigation que vous souhaitez centrer, vous ne gênerez pas les valeurs par défaut du bootstrap et ne bousilleriez pas les autres sections de navigation que vous pourriez avoir dans votre page. Vous pouvez le faire comme ça:

Notez la classe .center dans le conteneur navbar

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

Et ensuite, vous pouvez cibler la classe .center comme suit:

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

Démo: http://jsfiddle.net/C7LWm/show/

Edit: oublié de réaligner les éléments du sous-menu à gauche, voici le correctif:

CSS

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

Démo: http://jsfiddle.net/C7LWm/1/show/

50
Andres Ilich

Je sais que c'est un ancien post, mais j'ai aussi remarqué ce post à quelques reprises dans mon google. En fait, je veux mettre les choses au clair pour le centrage de la barre de navigation dans le bootstrap de Twitter, car la méthode actuellement acceptée n’est pas fausse, mais n’est pas nécessaire car le bootstrap de Twitter le permet.

Il existe en fait un meilleur moyen de le faire que de le modifier manuellement. Cela permettra de réduire le code en utilisant ce qui est déjà dans le bootstrap de Twitter.

<div class="navbar navbar-fixed-top navbar-inverse">
    <div class="navbar-inner">
        <div class="container">
            <a class="brand" href="#">RIZEN</a>
            <ul class="nav">
                <li class="active"><a href="/">Home</a></li>
                <li><a href="#">Events</a></li>
                <li><a href="#">Links</a></li>
                <li><a href="#">Gallery</a></li>
                <li><a href="#">Contact</a></li>
                <li><a href="#">Forums</a></li>
            </ul>
        </div>
    </div>
</div>

Panne
La première ligne est assez simple car nous créons la barre de navigation, nous la positionnons tout en haut dans la fenêtre, puis nous passons du blanc au noir en inversant le thème de la couleur.

Nous allons ensuite assigner le navbar-inner qui dit plus ou moins, si possible, définir une hauteur minimale et c’est d’où viennent les styles de couleurs, et non la ligne ci-dessus.

Voici la IMPORTANT ligne alors que nous abandonnons la disposition fluide de la barre de navigation et n’avons plus qu’un conteneur. Cela définit un fixe avec des marges au centre qui aligne le contenu interne sur l'écran. Cela se fait en ayant des marges automatiques et en définissant une largeur.

Cette méthode fera ce que vous voulez, car vous économiserez réellement kb dans les demandes d’en-tête en n’ajoutant pas de code supplémentaire et en utilisant correctement l’échafaudage avec le bootstrap de Twitter et en évitant un excès de code supplémentaire. J'ai utilisé cette méthode dans mes propres projets et continue de l'utiliser dans mon projet actuel. Le risque lié à la modification de TBS (Twitter Bootstrap) est que vous perdez la cohérence du code et que si vous souhaitez modifier des éléments à l'avenir, vous devez noter mentalement ce que vous avez modifié, sinon les éléments risquent de ne pas fonctionner comme prévu.

J'espère que cela t'aides. Aussi, si vous voulez un exemple concret, il suffit de regarder la page d’accueil de Twitter bootstrap, comme cela a été le cas.

3
Phreak Nation

Ah et aussi, si vous souhaitez que les espaces des deux côtés (avant "Nom du projet" et après "Dropdown") soient symétriques, ajoutez ce qui suit:

.navbar .nav, .navbar .nav > ul
{
    float: right
}

De plus, il semble que l'utilisation de la version suivante (à partir de Bootstrap v2.0.4) ne centre pas encore la barre de navigation:

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

Vous devez changer pour 

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

(Extrait de l'échantillon fourni par Andres llich; juste qu'il a raté le changement)

Maintenant ça marche pour moi ...

1
Gabriel

Le css de centrage ci-dessus fonctionne bien sur les barres de navigation non repliées uniquement.

Ce n'est cependant pas idéal lorsque la barre de navigation est réduite. Par défaut, chaque élément de la barre de navigation réduit est sur sa propre ligne, comme un menu déroulant. Mais le css ci-dessus essaie de placer tous les éléments effondrés sur la même ligne, ce qui n’est pas idéal.

J'ai utilisé ce correctif pour intégrer le css de centrage dans une requête multimédia, de sorte qu'il se déclenche uniquement sur les barres de navigation non réduites:

@media (min-width: 768px) {
    .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;
    }
}

(testé avec bootstrap 3.1.1)

0
terrymorse