Die Zentrierung der navbar-Inhalte in der Bootstrap-4 (alpha 5)

Ich versuche, um die Mitte der navbar-Inhalte in der Bootstrap-4, alpha 5. Ich habe ein wenig googeln, und ich denke, es könnte einige trick mit d-block und mx-auto.

Allerdings kann ich nicht herausfinden, wie um die Mitte der navigation links, so dass Sie total im Mittelpunkt, nicht nur das hinzufügen eines Containers um Sie herum.

Probe navbar code Spiele ich mit:.

<nav class="navbar navbar-light bg-faded">
  <ul class="nav navbar-nav">
    <li class="nav-item active">
      <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Features</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Pricing</a>
    </li>
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Dropdown link
      </a>
      <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
        <a class="dropdown-item" href="#">Action</a>
        <a class="dropdown-item" href="#">Another action</a>
        <a class="dropdown-item" href="#">Something else here</a>
      </div>
    </li>
  </ul>
</nav>

JSFiddle, wenn Sie mögen

InformationsquelleAutor Ole Kristian Losvik | 2016-11-09

  1. 0

    Fügen Sie diesen code in Ihre css-Datei.

    .nav {
  text-align: center;
}

.navbar-nav .nav-item {
  float: inherit;
  display: inline-block;
}

    InformationsquelleAutor Nope

  2. 9

    Zentrierung Navbar Elementen ist einfacher in der Bootstrap-4, und erfordert keine zusätzlichen markup.

    <nav class="navbar navbar-expand-md navbar-light bg-faded">
  <ul class="navbar-nav mx-auto">
    <li class="nav-item active text-center">
      <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
    </li>
    <li class="nav-item text-center">
      <a class="nav-link" href="#">Features</a>
    </li>
    <li class="nav-item text-center">
      <a class="nav-link" href="#">Pricing</a>
    </li>
    <li class="nav-item dropdown text-center">
      <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Dropdown link
      </a>
      <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
        <a class="dropdown-item" href="#">Action</a>
        <a class="dropdown-item" href="#">Another action</a>
        <a class="dropdown-item" href="#">Something else here</a>
      </div>
    </li>
  </ul>
</nav>

    Bootstrap-4 Center Navbar Demo (aktualisiert für v4.0.0)

    Wenn Sie brauchen, um center nur bestimmte Elemente, wie die Marke oder Links, Lesen Sie diese Antwort

    InformationsquelleAutor Zim

Schreibe einen Kommentar