ブートストラップ ナビゲーションバーで要素を中央に配置するにはどうすればよいですか?

ブートストラップ ナビゲーション バー内の要素を中央に配置する

ブートストラップ ナビゲーション バー内で要素を中央に配置しようとすると、難しいように思えるかもしれません。ただし、正しい手法を使用すれば、これは実現可能です。

Bootstrap 4 以降

Bootstrap 4 以降のバージョンでは、調整プロセスを簡素化するフレックスボックスが使用されます。 「Web サイト名」などの要素を中央に配置するには、それを含む「nav.navbar-nav」に「mx-auto」クラスを追加します。これにより、左右の「nav.navbar-nav」要素を基準にして中央に配置されます。

例:

<nav class="navbar navbar-dark bg-dark main-nav">
  <div class="container">
    <ul class="nav navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Download</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Register</a>
      </li>
    </ul>

    <ul class="nav navbar-nav mx-auto">
      <li class="nav-item"><a class="nav-link" href="#">Website Name</a></li>
    </ul>

    <ul class="nav navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">Rates</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Help</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Contact</a>
      </li>
    </ul>
  </div>
</nav>

以前のブートストラップ バージョン

Bootstrap バージョン 4 より前の場合、フレックスボックスのネストまたは位置: 絶対を使用してセンタリングが必要です

追加オプション

Navbar に「nav.navbar-nav」が 1 つだけ含まれている場合は、「justify-content-center」を使用してその中央に配置できます。

絶対センタリング

を達成するには絶対センタリングの場合は、位置: 絶対メソッドまたはフレックスボックス ネストのいずれかを使用できます。

絶対位置

.abs-center-x {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

フレックスボックス ネスト

「justify-content-center」を使用して、中央に配置されたアイテムを別のフレックスボックス コンテナ内にネストし、 「フレックスフィル」が適用されました。

<ul class="nav navbar-nav flex-fill">
  <li class="nav-item">
    <ul class="nav navbar-nav justify-content-center">
      <li class="nav-item"><a class="nav-link" href="#">Website Name</a></li>
    </ul>
  </li>
</ul>

以上がブートストラップ ナビゲーションバーで要素を中央に配置するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。