Centrer le contenu sur le bootstrap navbar responsive

le post original demandait comment centrer le navbar effondré. Pour centrer les éléments sur le navbar normal, essayez ceci:

.navbar-nav {
    float:none;
    margin:0 auto;
    display: block;
    text-align: center;
}

.navbar-nav > li {
    display: inline-block;
    float:none;
}

il y a une autre façon de faire cela pour les mises en page qui n'ont pas besoin de mettre la barre de navigation à l'intérieur du conteneur, et qui ne nécessitent pas de dérogations CSS ou Bootstrap.

placez simplement un div avec la classe Bootstrap container autour du navbar. Cela va centrer les liens à l'intérieur de la barre de navigation:

<nav class="navbar navbar-default">
  <!-- here's where you put the container tag -->
  <div class="container">

    <div class="navbar-header">
    <!-- header and collapsed icon here -->
    </div>

    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
      <!-- links here -->
      </ul>
    </div>
  </div> <!-- close the container tag -->
</nav> <!-- close the nav tag -->

si vous voulez que le contenu du corps soit aligné sur la barre centrale de navigation, vous mettez aussi ce contenu dans la balise Bootstrap container .

<div class="container">
  <! -- body content here -->
</div>

tout le monde ne peut pas utiliser ce type de disposition (certaines personnes ont besoin de nicher le navbar lui-même à l'intérieur du container ). Néanmoins, si vous pouvez le faire, il est un moyen facile d'obtenir vos liens navbar et le corps centré.

vous pouvez voir les résultats dans cette fullpage JSFiddle: http://jsfiddle.net/bdd9U/231/embedded/result /

Source: http://jsfiddle.net/bdd9U/229 /

ce code a fonctionné pour moi

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

du site officiel de bootstrap (et, presque, comme Eric S. Bullington l'a dit.

https://getbootstrap.com/components/#navbar-default

l'exemple navbar ressemble à:

<nav class="navbar navbar-default">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
        ...etc

pour centrer le nav, que ce que j'ai fait:

<div class="container-fluid" id="nav_center">

css:

@media (min-width:768px) { /* don't break navbar on small screen */
    #nav_center {
        width: 700px /* need to found your width according to your entry*/
    }
}

"151930920 de travail" class="conteneur" et la barre de navigation de droite ou de gauche, et bien sûr, vous peut remplacer id par classe. : D

mise à Jour 2018

Bootstrap 4

centrage Navbar contenu est plus facile est Bootstrap 4 et vous pouvez voir de nombreux scénarios de centrage expliqué ici: https://stackoverflow.com/a/20362024/171456

Bootstrap 3

un autre scénario qui ne semble pas avoir été répondu encore est le centrage les deux le marque et navbar liens . Voici une solution..

.navbar .navbar-header,
.navbar-collapse {
    float:none;
    display:inline-block;
    vertical-align: top;
}

@media (max-width: 768px) {
    .navbar-collapse  {
        display: block;
    }
}

http://www.codeply.com/go/1lrdvNH9GI

Voir Aussi: Bootstrap barre de navigation à gauche, centré ou aligné à droite les éléments

semble comme toutes ces réponses impliquent CSS personnalisé sur le dessus de bootstrap. La réponse que je fournis utilise seulement bootstrap donc j'espère qu'il vient à utiliser pour ceux qui veulent limiter les personnalisations.

cela a été testé avec Bootstrap V3.3.7

<footer class="navbar-default navbar-fixed-bottom">
    <div class="container-fluid">
        <div class="row">
            <div class="col-xs-offset-5 col-xs-2 text-center">
                <p>I am centered text<p>
            </div>
            <div class="col-xs-5"></div>
        </div>
    </div>
</footer>

V4 de BootStrap ajoute Center (justify-content-center) et Right Alignment (justify-content-end) comme suit: https://v4-alpha.getbootstrap.com/components/navs/#horizontal-alignment

<ul class="nav justify-content-center">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>

Utiliser le code html suivant

<link rel="stylesheet" href="app/components/directives/navBar/navBar.scss"/>
<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
        <!-- Collect the nav links, forms, and other content for toggling -->
            <ul class="nav navbar-nav">
                <li><h5><a href="#/">Home</a></h5></li>
                <li>|</li>
                <li><h5><a href="#products">About</a></h5></li>
                <li>|</li>
                <li><h5><a href="#">Contacts</a></h5></li>
                <li>|</li>
                <li><h5><a href="#cart">Cart</a></h5></li>
            </ul>
    </div><!-- /.container-fluid -->
</nav>

et css

.navbar-nav {
  width: 100%;
  text-align: center;
}
.navbar-nav > li {
  float: none;
  display: inline-block;
}
.navbar-default {
  background-color: white;
  border-color: white;
}
.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:hover, .navbar-default .navbar-nav>.active>a:focus{
  background-color:white;
}

modifier selon vos besoins

ça devrait marcher

 .navbar-nav {
    position: absolute;
    left: 50%;
    transform: translatex(-50%);
}