it-swarm.com.de

Inhalt in der responsiven Bootstrap-Navigationsleiste zentrieren

Ich habe Probleme beim Zentrieren meines Inhalts in der Bootstrap-Navigationsleiste. Ich benutze bootstrap 3. Ich habe viele Beiträge gelesen, aber die verwendeten CSS oder 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/

204
Nick lK

Ich denke, das ist, wonach du suchst. Sie müssen den float: left aus dem inneren Navigationsbereich entfernen, um ihn zu zentrieren und 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/

Edit:, wenn dieser Effekt nur dann auftreten soll, wenn das Navi in ​​der entsprechenden Medienabfrage nicht eingeblendet ist.

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

447
hajpoj

Der ursprüngliche Beitrag fragte, wie die eingestürzte Navbar zentriert werden sollte. 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;
}
41
Radu Rascol

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

Platzieren Sie einfach ein div mit der Klasse Bootstrap container 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 möchten, dass der Bodyinhalt dann an der mittleren Navigationsleiste ausgerichtet wird, fügen Sie diesen Bodyinhalt auch in den Bootstrap-Tag container ein.

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

Nicht jeder kann diese Art von Layout verwenden (einige Benutzer müssen die Navigationsleiste selbst in der container verschachteln). Wenn Sie es dennoch können, ist es eine einfache Möglichkeit, Ihre Navbar-Links und Ihren Körper in die Mitte zu bringen.

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

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

19

Dieser Code hat für mich funktioniert 

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

Update 2018

Bootstrap 4

Das Zentrieren von Navbar-Inhalten ist einfacher, wenn Sie Bootstrap 4 verwenden. Hier finden Sie viele Zentrierungsszenarien: https://stackoverflow.com/a/20362024/171456

Bootstrap 3

Ein anderes Szenario, das noch nicht beantwortet wurde, ist die Zentrierung von beiden der 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://www.codeply.com/go/1lrdvNH9GI

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

4
Zim

von der offiziellen Bootstrap-Site (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, 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*/
    }
}

arbeite mit class = "container" und navbar-right oder left und natürlich kannst du id durch class ersetzen. : D

4
NoZero

Anscheinend beinhalten all diese Antworten benutzerdefinierte CSS auf Bootstrap. Die Antwort, die ich hier vorstelle, verwendet nur Bootstrap. Ich hoffe, dass es für diejenigen verwendet wird, 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>
3
Tommy May

V4 von BootStrap fügt Center (justify-content-center) und Right Alignment (justify-content-end) wie folgt 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>
2
The Coder

das sollte funktionieren 

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

Für Bootstrap 4:

Benutz einfach

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

mx-auto erledigt die Arbeit

1
Hezy Ziv

Verwenden Sie das folgende 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

1