Zentrieren Sie den Inhalt in der reaktionsschnellen Bootstrap-Navigationsleiste

221

Ich habe Probleme, meinen Inhalt in der Bootstrap-Navigationsleiste zu zentrieren. Ich verwende Bootstrap 3. Ich habe viele Beiträge gelesen, aber das verwendete CSS oder die verwendeten Methoden funktionieren nicht mit meinem Code! Ich bin wirklich frustriert, also ist dies meine letzte Option. Jede Hilfe wäre dankbar!

<!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 lK
quelle

Antworten:

457

Ich denke, das ist es, wonach Sie suchen. Sie müssen das float: leftaus dem inneren Navi entfernen, um es zu zentrieren und es zu einem Inline-Block zu machen.

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

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

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

Bearbeiten: Wenn Sie diesen Effekt nur dann erzielen möchten, wenn das Navigationssystem nicht reduziert ist, umgeben Sie ihn in der entsprechenden Medienabfrage.

@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
quelle
Wenn Sie Probleme mit zusätzlichem Speicherplatz unter den Links haben (wenn Sie beispielsweise einen anderen Hintergrund für aktive Links verwenden), können Sie .navbar .navbar-collapse { line-height: 0px; }
Folgendes
3
Ich werde empfehlen, nicht mit original bootstrap.css zu spielen. Erstellen Sie stattdessen Ihren eigenen Stil.
Faizan Mubasher
In meinem Fall musste ich "flex" entfernen und durch "inline-block" ersetzen, dann fing es an zu funktionieren.
theMayer
Ist eine perfekte Lösung.
Renato Lazaro
47

Der ursprüngliche Beitrag fragte, wie die zusammengeklappte Navigationsleiste zentriert werden soll. Versuchen Sie Folgendes, um Elemente auf der normalen Navigationsleiste zu zentrieren:

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

.navbar-nav > li {
    display: inline-block;
    float:none;
}
Radu Rascol
quelle
23

Es gibt eine andere Möglichkeit, dies für Layouts zu tun, bei denen die Navigationsleiste nicht im Container platziert werden muss und für die keine CSS- oder Bootstrap-Überschreibungen erforderlich sind.

Platzieren Sie einfach ein Div mit der Bootstrap- containerKlasse um die Navigationsleiste. Dadurch werden die Links in der Navigationsleiste zentriert:

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

Wenn Sie den Körperinhalt an der mittleren Navigationsleiste ausrichten möchten, fügen Sie diesen Körperinhalt auch in das Bootstrap- containerTag ein.

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

Nicht jeder kann diese Art von Layout verwenden (einige Benutzer müssen die Navigationsleiste selbst in das Layout einbetten container). Wenn Sie dies jedoch tun können, ist es eine einfache Möglichkeit, Ihre Navigationsleisten-Links und Ihren Körper zentriert zu machen.

Sie können die Ergebnisse auf dieser ganzseitigen JSFiddle sehen: http://jsfiddle.net/bdd9U/231/embedded/result/

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

Eric S. Bullington
quelle
13
Hm, diese Lösung scheint nicht mehr zu funktionieren. Ihr Beispiel ist jetzt linksbündig.
Bjarte Aune Olsen
hat bei mir nicht funktioniert, aber ich schätze die Einfachheit Ihrer Lösung!
Ben Casalino
12

Dieser Code hat bei mir funktioniert 

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

Für Bootstrap 4:

Benutz einfach

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

mx-auto erledigt den Job

Hezy Ziv
quelle
8

Update 2020 ...

Bootstrap 4

Das Zentrieren von Navbar-Inhalten ist mit Bootstrap 4 einfacher, und Sie können viele hier erläuterte Zentrierungsszenarien sehen: https://stackoverflow.com/a/20362024/171456

Bootstrap 3

Ein weiteres Szenario , das scheint noch nicht beantwortet zu haben , wird Zentrierung sowohl die Marke und navbar Links . Hier ist eine Lösung ..

.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

Siehe auch: Bootstrap NavBar mit links, mittig oder rechts ausgerichteten Elementen

Zim
quelle
4

von der offiziellen Bootstrap-Seite (und fast wie Eric S. Bullington sagte.

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

Die Beispiel-Navigationsleiste sieht folgendermaßen aus:

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

um das nav zu zentrieren, das was ich getan habe:

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

Arbeiten Sie mit class = "container" und navbar-right oder left, und natürlich können Sie id durch class ersetzen. : D.

NoZero
quelle
3

Anscheinend beinhalten alle diese Antworten benutzerdefiniertes CSS über dem Bootstrap. Die Antwort, die ich gebe, verwendet nur Bootstrap, daher hoffe ich, dass sie für diejenigen verwendet werden kann, die Anpassungen einschränken möchten.

Dies wurde mit Bootstrap V3.3.7 getestet

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

das sollte funktionieren 

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

Verwenden Sie folgendes 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>

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

Ändern Sie nach Ihren Bedürfnissen

Alexander Gorelik
quelle
1

V4 von BootStrap fügt Center (Justify-Content-Center) und Right Alignment (Justify-Content-End) hinzu: 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>
Der Codierer
quelle
Bist du sicher, dass das funktioniert? Ich habe es versucht, aber da meine Li's in voller Breite sind, macht das keinen Unterschied
gota
Hallo Nuno, wir verwenden dies in unserer App. Ja, es funktioniert definitiv. Es ist ein horizontales Menü oben in unserer App, das noch verwendet wird.
The Coder