【Bootstrap 4】navbar の一部の nav-item を右寄せに

基礎的すぎるのか、意外と情報が見つからなかったので投稿します。

やりたいこと

BootstrapのNavbarで、
Home About などは左、Register Login Dropdown などは右に置きたい。

けど、スマホのハンバーガーメニューではすべての要素を左寄せにしたい。
(ネットで見つけた解決策の多くでは、スマホの方でも右寄せとなってしまって、悲しい気分になった。)

なるべく、簡潔に、公式っぽい方法でやりたい。

やりかた

左右で２つの<ul class="navbar-nav"></ul>に分けて、
左のほうにmr-auto クラスを付与するだけ。

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container">
    <a class="navbar-brand " href="/">Navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavDropdown">
      
      <!-- この下の行に mr-auto クラスを付与するだけ -->
      <ul class="navbar-nav mr-auto">　
        <li class="nav-item">
          <a class="nav-link" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">About</a>
        </li>
      </ul>

      <ul class="navbar-nav">
        <li class="nav-item dropdown">
         <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
           Dropdown
         </a>
         <div class="dropdown-menu" aria-labelledby="navbarDropdown">
           <a class="dropdown-item" href="#">Action</a>
           <a class="dropdown-item" href="#">Another action</a>
           <div class="dropdown-divider"></div>
           <a class="dropdown-item" href="#">Something else here</a>
         </div>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Register</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Login</a>
        </li>
      </ul>

    </div>
  </div>
</nav>

サンプル: https://codepen.io/rodhamjun/pen/wXbKyE

mr-autoは、CSSのmargin-right: autoと同じ効果。
実は、Bootstrap 4からは、navbarは、flexboxとなったので、margin-right: autoが効く。
逆に、float: rightは効きません。

Dropdownが画面外に出る問題

一番右に、Dropdownを置くと、開いたとき一部が画面外に出ちゃう。(アカン)

<div class="dropdown-menu"></div> に dropdown-menu-rightクラスを付与して解決。

<li class="nav-item dropdown">
  <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown
  </a>
  <!-- この下の行に dropdown-menu-right を追加するだけ。 -->
  <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</li>

以上です。