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">
<p>このコードでは、d-md-flex クラスと d-block クラスが使用されます。中サイズ以上の画面でブランドとリンクを水平に配置します。 flex-row クラスにより、項目が確実に横に配置されます。 mx-md-auto クラスと mx-0 クラスは、ブランド イメージの幅を調整して、アイテムを使用可能なスペースの中央に配置します。</p>
<p><strong>Bootstrap 4.1</strong></p>
<p>Bootstrap の場合4.1:</p>
<pre class="brush:php;toolbar:false"><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">
<p>この場合、mx-auto はnavbar-nav はリンクのみを中央に配置します。ブランドは、justify-content-center などの他の手法を使用して中央に配置できます。</p>
<p><strong>リンクをビューポート内に正確に配置</strong></p>
<p>リンクをビューポート内で正確に中央に配置するには、次の点を考慮してください。テクニック:</p>
<pre class="brush:php;toolbar:false"><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">
<p>ここでは、navbar-nav に固定幅と justify-content が与えられています。中央をクリックすると、リンクが画面の中央に正確に配置されます。</p>
<p>さらなるカスタマイズと追加の例については、以下のリファレンス セクションにあるリンクを参照してください。</p>
</div></nav>