Wyśrodkuj zawartość w responsywnym pasku bootstrap

W oryginalnym poście pytano, jak wyśrodkować zawalony navbar. Aby wyśrodkować elementy na normalnym pasku nawigacyjnym, spróbuj tego:

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

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

Jest inny sposób, aby to zrobić dla układów, które nie muszą umieszczać paska nawigacyjnego wewnątrz kontenera i które nie wymagają przesłonięcia CSS lub Bootstrap.

Po prostu umieść div z klasą Bootstrap container wokół paska nawigacyjnego. Spowoduje to wyśrodkowanie linków wewnątrz paska nawigacyjnego:

<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 -->

Jeśli chcesz, aby zawartość treści była wyrównana do środkowego paska nawigacyjnego, umieść ją również w znaczniku Bootstrap container.

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

Nie każdy może używać tego typu układów (niektóre ludzie muszą zagnieżdżać sam navbar wewnątrz container). Niemniej jednak, jeśli możesz to zrobić, jest to łatwy sposób na wyśrodkowanie linków navbara i ciała.

Możesz zobaczyć wyniki w tym fullpage JSFiddle: http://jsfiddle.net/bdd9U/231/embedded/result/

Źródło: http://jsfiddle.net/bdd9U/229/

Ten kod zadziałał dla mnie

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

Z oficjalnej strony bootstrap (i prawie, jak powiedział Eric S. Bullington.

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

Przykładowy navbar wygląda następująco:

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

Aby wyśrodkować nav, to co zrobiłem:

<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*/
    }
}

Praca z class = "container" i navbar-prawo lub lewo, i oczywiście można zastąpić id przez class. : D

Aktualizacja 2018

Bootstrap 4

Centrowanie zawartości paska nawigacyjnego jest łatwiejsze jest Bootstrap 4 i można zobaczyć wiele scenariuszy centrowania wyjaśnionych tutaj: https://stackoverflow.com/a/20362024/171456

Bootstrap 3

Innym scenariuszem, na który nie ma jeszcze odpowiedzi, jest centrowanie ZARÓWNOznaku , jak i linków navbar. Oto rozwiązanie..

.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

Zobacz też: Bootstrap NavBar z lewym, środkowym lub prawym wyrównanym elementem

Wydaje się, że wszystkie te odpowiedzi dotyczą niestandardowego css na szczycie bootstrap. Odpowiedź, którą podaję, wykorzystuje tylko bootstrap, więc mam nadzieję, że przyda się tym, którzy chcą ograniczyć dostosowywanie.

To zostało przetestowane z 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 Bootstrap dodaje Center (justify-content-center) i Right Alignment (justify-content-end) zgodnie z: 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>

Użyj następującego kodu html

<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>

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

Modyfikuj według swoich potrzeb

To powinno zadziałać

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