Wyśrodkuj zawartość w responsywnym pasku nawigacyjnym bootstrap

221

Mam problem z wyśrodkowaniem zawartości na pasku nawigacyjnym ładowania początkowego. Używam bootstrap 3. Przeczytałem wiele postów, ale CSS lub użyte metody nie będą działać z moim kodem! Jestem naprawdę sfrustrowany, więc to moja ostatnia opcja. Każda pomoc będzie mile widziana!

<!DOCTYPE html>
<html>
  <head>
    <title>Navigation</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
    <link href="css/style.css" rel="stylesheet" media="screen">
  </head>
  <body>
    <div class="container">
      <nav class="navbar navbar-default" role="navigation">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
            <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 navbar-ex1-collapse">
          <ul class="nav navbar-nav">
            <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 class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li><a href="#">Separated link</a></li>
                <li><a href="#">One more separated link</a></li>
              </ul>
            </li>
          </ul>
        </div><!-- /.navbar-collapse -->
      </nav>
      <h1>Home</h1>

   </div>
     <!--JAVASCRIPT-->
   <script src="js/jquery-1.10.2.min.js"></script>
   <script src="js/bootstrap.min.js"></script>
 </body>
</html>

https://jsfiddle.net/amk07fb3/

css  twitter-bootstrap  navbar 
— Nick ŁK
źródło

Odpowiedzi:

457

Myślę, że tego właśnie szukasz. Musisz usunąć float: leftwewnętrzną nawigację, aby wyśrodkować ją i uczynić z niej blok wbudowany.

.navbar .navbar-nav {
  display: inline-block;
  float: none;
  vertical-align: top;
}

.navbar .navbar-collapse {
  text-align: center;
}

http://jsfiddle.net/bdd9U/2/

Edycja: jeśli chcesz, aby efekt ten pojawiał się tylko wtedy, gdy nawigacja nie jest zwinięta, otocz go odpowiednim zapytaniem o media.

@media (min-width: 768px) {
    .navbar .navbar-nav {
        display: inline-block;
        float: none;
        vertical-align: top;
    }

    .navbar .navbar-collapse {
        text-align: center;
    }
}

http://jsfiddle.net/bdd9U/3/

— Hajpoj
źródło
Jeśli masz problemy z dodatkową przestrzenią pod linkami (jeśli na przykład używasz innego tła dla aktywnych linków), możesz użyć:.navbar .navbar-collapse { line-height: 0px; }
— jenniwren,
3
Polecam nie grać z oryginalnym bootstrap.css. Zamiast tego stwórz własny styl.
— Faizan Mubasher
W moim przypadku musiałem usunąć „flex” i zastąpić „inline-block”, a potem zaczął działać.
— theMayer
To idealne rozwiązanie.
— Renato Lazaro
47

Oryginalny post pytał, jak wyśrodkować zwinięty pasek nawigacyjny. Aby wyśrodkować elementy na normalnym pasku nawigacyjnym, spróbuj wykonać następujące czynności:

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

.navbar-nav > li {
    display: inline-block;
    float:none;
}
— Radu Rascol
źródło
23

Jest inny sposób, aby to zrobić w przypadku układów, które nie muszą umieszczać paska nawigacyjnego w kontenerze i które nie wymagają przesłonięcia CSS ani Bootstrap.

Wystarczy umieścić div z containerklasą Bootstrap wokół paska nawigacyjnego. Spowoduje to wyśrodkowanie łączy w pasku nawigacyjnym:

<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 wyrównać zawartość ciała do środkowego paska nawigacyjnego, umieść tę treść również w containerznaczniku Bootstrap .

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

Nie każdy może korzystać z tego typu układu (niektóre osoby muszą zagnieździć sam pasek nawigacyjny wewnątrz container). Niemniej jednak, jeśli możesz to zrobić, jest to łatwy sposób na wyśrodkowanie łączy paska nawigacyjnego i ciała.

Wyniki można zobaczyć na tej pełnej stronie JSFiddle: http://jsfiddle.net/bdd9U/231/embedded/result/

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

— Eric S. Bullington
źródło
13
Hm, to rozwiązanie już nie działa. Twój przykład jest teraz wyrównany do lewej.
— Bjarte Aune Olsen
nie działało dla mnie, ale doceń prostotę swojego rozwiązania!
— Ben Casalino,
12

Ten kod działał dla mnie 

.navbar .navbar-nav {
    display: inline-block;
    float: none;
}
.navbar .navbar-collapse {
    text-align: center;
}
— Shuhad Zaman
źródło
8

W przypadku Bootstrap 4:

Po prostu użyj

<ul class="navbar-nav mx-auto">

MX-Auto wykona zadanie

— Hezy Ziv
źródło
8

Aktualizacja 2020 ...

Bootstrap 4

Centrowanie zawartości paska nawigacyjnego jest łatwiejsze - Bootstrap 4, a wiele scenariuszy centrowania wyjaśniono tutaj: https://stackoverflow.com/a/20362024/171456

Bootstrap 3

Inny scenariusz, który nie wydaje się być jeszcze odpowiedzi jest centrowanie zarówno na markę i NavBar linki . 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://codeply.com/go/1lrdvNH9GI

Zobacz także: Bootstrap NavBar z pozycjami wyrównanymi do lewej, środkowej lub prawej

— Zim
źródło
4

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

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

przykładowy pasek nawigacyjny 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ć nawigację, 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*/
    }
}

pracuj z class = "container" i navbar-right lub left, i oczywiście możesz zastąpić id klasą. :RE

— NoZero
źródło
3

Wygląda na to, że wszystkie te odpowiedzi dotyczą niestandardowego css na początku bootstrapu. Podana przeze mnie odpowiedź wykorzystuje tylko bootstrap, więc mam nadzieję, że przyda się tym, którzy chcą ograniczyć dostosowania.

Zostało to 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>
— Tommy May
źródło
2

to powinno działać 

 .navbar-nav {
    position: absolute;
    left: 50%;
    transform: translatex(-50%);
}
— Govan
źródło
1

Użyj następującego 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;
}

Zmodyfikuj zgodnie ze swoimi potrzebami

— Alexander Gorelik
źródło
1

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>
— The Coder
źródło
Jesteś pewien, że to działa? Próbowałem, ale ponieważ moje li mają pełną szerokość, nie ma to żadnej różnicy
— gota
Cześć Nuno, używamy tego w naszej aplikacji, więc tak, to zdecydowanie działa, to horyzontalne menu u góry naszej aplikacji, wciąż w użyciu.
— The Coder
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.