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

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

# やりたいこと

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

<img width="1197" alt="スクリーンショット 2018-07-05 1.31.32.png" src="https://qiita-image-store.s3.amazonaws.com/0/225997/a90b2b70-83d7-c710-9ef2-a5c54a2dd69b.png">

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

<img width="375" alt="スクリーンショット 2018-07-05 1.36.23.png" src="https://qiita-image-store.s3.amazonaws.com/0/225997/277207f9-ef43-3d30-cdbe-b7f727243c3c.png">

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

# やりかた

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

```html
<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を置くと、開いたとき一部が画面外に出ちゃう。(アカン)

<img width="1045" alt="スクリーンショット 2018-07-05 2.10.02.png" src="https://qiita-image-store.s3.amazonaws.com/0/225997/e4eae949-136a-a819-ae26-722b195bc102.png">

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

<img width="1045" alt="スクリーンショット 2018-07-05 2.11.30.png" src="https://qiita-image-store.s3.amazonaws.com/0/225997/4a0b1ecc-bdd2-90ce-d784-506f2d72ed5d.png">

```html
<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>
```

以上です。