Bootstrap 4 でナビゲーション項目を中央に配置するにはどうすればよいですか?

Bootstrap でのナビゲーション項目の中央揃え

Bootstrap 4 では、フレックスボックスとマージン ユーティリティを使用してナビゲーション項目 (リンク) を水平方向に整列させることができます。

ブートストラップ 4 アルファ 6 および後で

Bootstrap 4 alpha 6 以降でブランドとリンクの両方を中央に配置するには:

<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="d-md-flex d-block flex-row mx-md-auto mx-0">
    <a class="navbar-brand" href="#">Navbar</a>
    <div class="collapse navbar-collapse mr-auto">

このコードでは、d-md-flex クラスと d-block クラスが使用されます。中サイズ以上の画面でブランドとリンクを水平に配置します。 flex-row クラスにより、項目が確実に横に配置されます。 mx-md-auto クラスと mx-0 クラスは、ブランド イメージの幅を調整して、アイテムを使用可能なスペースの中央に配置します。

Bootstrap 4.1

Bootstrap の場合4.1:

<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse">

この場合、mx-auto はnavbar-nav はリンクのみを中央に配置します。ブランドは、justify-content-center などの他の手法を使用して中央に配置できます。

リンクをビューポート内に正確に配置

リンクをビューポート内で正確に中央に配置するには、次の点を考慮してください。テクニック:

<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="navbar-nav">

ここでは、navbar-nav に固定幅と justify-content が与えられています。中央をクリックすると、リンクが画面の中央に正確に配置されます。

さらなるカスタマイズと追加の例については、以下のリファレンス セクションにあるリンクを参照してください。

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