web-dev-qa-db-fra.com

Centrer la navigation dans Twitter Bootstrap

Je veux pouvoir centrer la page morte de navigation au milieu d'une page et la garder centrée dans différentes résolutions. Je ne veux pas utiliser de décalage pour pousser dessus ou pour laisser la marge gauche, car cela viderait le navigateur dans différentes largeurs de navigateur. C’est le bar typique avec lequel je déconne, mais le ul finit toujours par s’aligner à gauche. 

     <div class="navbar navbar-fixed-top">
      <div class="navbar-inner">
           <div class="container">
                <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>
                <div class="nav-collapse">
                     <ul class="nav">
                          <li class="active"><a href="#">Menu</a></li>
                          <li><a href="#">On Tap</a></li>
                          <li><a href="#">Shows</a></li>
                          <li><a href="#">Surfwear</a></li>
                          <li><a href="#" >Contact</a></li>
                     </ul>
                </div><!--/.nav-collapse -->
           </div><!-- container -->
      </div><!-- navbar-inner -->
 </div><!--  navbar navbar-fixed-top -->
csstwitter-bootstrapcenternavbar
36
pelachile

Double possible de Modifier la barre de navigation de bootstrap de Twitter . Je suppose que c'est ce que vous recherchez (copié):

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

Comme indiqué dans la réponse liée, vous devez créer une nouvelle classe avec ces propriétés et l'ajouter à la div de navigation.

56
John Klakegg

Pour ceux qui en ont besoin pour Bootstrap 3, c'est maintenant beaucoup plus facile.

La nouvelle classe nav-justified peut être utilisée pour centrer tous les liens de la barre de navigation.

http://www.bootply.com/g3g125MLGr

<div class="navbar">
  <ul class="nav nav-justified" id="myNav">
    <li><a href="#">Home</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
  </ul>
</div>

Ou, avec un peu de CSS, vous pouvez centrer uniquement la marque/le logo et garder les liens gauche/droit séparés.

http://www.bootply.com/3iSOTAyumP

7
Zim

Vous pouvez définir la largeur fixe .navbar, puis définir sa marge gauche et droite sur auto.

Démo

.navbar{
    width: 80%;
    margin: 0 auto;
}​
5
guanome

Pour Bootstrap v4, vérifiez ceci:

https://v4-alpha.getbootstrap.com/components/pagination/#alignment

ajoutez seulement la classe à ul.pagination:

<nav">
  <ul class="pagination justify-content-center">
    <li class="page-item disabled">
      <a class="page-link" href="#" tabindex="-1">Previous</a>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item">
      <a class="page-link" href="#">Next</a>
    </li>
  </ul>
</nav>
0
dumP

http://www.bootply.com/3iSOTAyumP dans cet exemple, le bouton Réduire n'était pas cliquable, car la marque .navbar était devant.

http://www.bootply.com/RfnEgu45qR il existe une version mise à jour où les boutons de réduction sont réellement cliquables.

0
moryde

Code utilisé base nav bootstrap

<!--MENU CENTER`enter code here` RESPONSIVE -->

  <div class="container-fluid">
        <div class="container logo"><h1>LOGO</h1></div>
      <nav class="navbar navbar-default menu">
        <div class="container-fluid">
          <!-- Brand and toggle get grouped for better mobile display -->
          <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#defaultNavbar2"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
           </div>
          <!-- Collect the nav links, forms, and other content for toggling -->
          <div class="collapse navbar-collapse" id="defaultNavbar2">
            <ul class="nav nav-justified" >
              <li><a href="#">Home</a></li>
              <li><a href="#">Link</a></li>
              <li><a href="#">Link</a></li>
              <li><a href="#">Link</a></li>
              <li><a href="#">Link</a></li>
              <li><a href="#">Link</a></li>
              <li><a href="#">Link</a></li>
            </ul>
          </div>
          <!-- /.navbar-collapse -->
        </div>
        <!-- /.container-fluid -->
      </nav>
    </div>
  <!-- END MENU-->

0
SERGIO
.navbar-right { 
    margin-left:auto;
    margin-right:auto; 
    max-width :40%;   
    float:none !important;
}

il suffit de copier ce code et de changer max-width comme bon vous semble

0
Medhat Mahmoud

Je préfère ça :

<nav class="navbar">
  <div class="hidden-xs hidden-sm" style="position: absolute;left: 50%;margin-left:-56px;width:112px" id="centered-div">
    <!-- this element is on the center of the nav, visible only on -md and -lg -->
    <a></a>
  </div>

  <div class="container-fluid">
    <!-- ...things with your navbar... -->
      <div class="visible-xs visible-sm">
        <!-- this element will be hidden on -md and -lg -->
      </div>
    <!-- ...things with your navbar... -->
  </div>
</nav>

L'élément est parfaitement centré et sera caché sur certaines tailles d'écran (il n'y avait plus de place sur -xs et -sm pour moi par exemple) J'ai eu l'idée de la barre de navigation réelle de Twitter

0
Nicolas Maloeuvre