web-dev-qa-db-ja.com

ナビゲーションバーのコンテンツをBootstrap 4（alpha 5）の中央に配置する

ナビゲーションバーのコンテンツをBootstrap 4、alpha 5の中央に配置しようとしています。少しグーグルしていて、d-blockとmx-autoに関連するトリックがあるかもしれません。

ただし、ナビゲーションリンクを中央に配置して、その周りにコンテナを追加するだけでなく、全体が中央になるようにする方法がわかりません。

私が遊んでいるサンプルのナビゲーションバーコード：。

<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

csstwitter-bootstrapbootstrap-4twitter-bootstrap-4
7
Ole Kristian Losvik

このコードをcssファイルに追加できます。

.nav {
  text-align: center;
}

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

Bootstrap 4では、ナビゲーションバーアイテムの中央揃えが簡単で、追加のマークアップは必要ありません。

<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 （v4.0.0用に更新）

ブランドやリンクなどの特定の要素のみを中央に配置する必要がある場合、 この回答を参照

11
Zim