ブートストラップナビゲーションバー内の要素を中央に配置するにはどうすればよいですか?-CSSチュートリアル-php.cn

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

Susan Sarandon

リリース： 2024-12-14 01:49:09

オリジナル

961 人が閲覧しました

How do I center an element within a Bootstrap Navbar?

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

問題: さまざまな試みにもかかわらず、ユーザーはブートストラップ内の要素を中央に配置できませんnavbar.

答え:

Bootstrap 5 (2021)

Navbar はフレックスボックスを利用しており、mx-auto クラスを使用して要素を中央に配置できます。

<nav class="navbar navbar-expand-md 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>

ログイン後にコピー

ブートストラップ 4.1

Bootstrap 4.1 以降の場合、左右のメニューを揃えるには、左にプルおよび右にプルする代わりに mx-auto を使用します。

<nav class="navbar navbar-expand-md 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>

ログイン後にコピー

その他の中央揃えオプション

Position:Absolute;: 中央に配置する要素を Position:Absolute; に設定します。そして、transform: translationX(-50%); を使用します。
Flexbox ネスト: 中央に配置された項目も表示するようにします: flexbox と justify-content: center.

これらの解決策には、中央の要素がさまざまな要素の隣接する要素と完全に整列しないなどの欠点がある可能性があることを覚えておいてください。

追加の注意事項:

必ず main-nav を目的の navbar クラス名に置き換えてください。
Navbar が単一の navbar-nav の場合は、justify-content-center を使用して中央に配置します。
要素を中央に配置するにはデスクトップでは左揃えですが、モバイルでは左揃えになります。メディアクエリを使用します。
Navbar のカスタマイズの詳細については、[Bootstrap ドキュメント](https://getbootstrap.com/docs/4.5/components/navbar/) を参照してください。

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