BootstrapでNavLinkを右側に移動する方法

1. CSSを使用する方法:

   • ナビゲーションバーの親要素に "justify-content-end" クラスを追加します。これにより、ナビゲーションバー内の要素が右側に配置されます。

   <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container justify-content-end">
      <!-- ナビゲーションバーのコンテンツ -->
    </div>
   </nav>

2. Flexboxを使用する方法:

   • ナビゲーションバーの親要素に "d-flex" クラスを追加します。これにより、フレックスボックスのデフォルトの配置が有効になります。
   • ナビゲーションバー内のNavLink要素に "ml-auto" クラスを追加します。これにより、左側の要素が左寄せされ、右側のNavLinkが右寄せされます。

   <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container d-flex">
      <!-- ナビゲーションバーのコンテンツ -->
      <NavLink class="ml-auto" to="/link">NavLink</NavLink>
    </div>
   </nav>

これらの方法を使用すると、BootstrapのNavLinkを右側に移動できます。適用したい方法を選択し、必要な場所にコードを追加してください。