Bootstrap4 Navbarの一部リストを右寄せする

Bootstrap

Bootstrap4のNavbar(ナビゲーションバー)で一部のリストだけ右寄せにしたいことはないでしょうか。例えば、ログインリンクだけ右寄せしたい時などです。

Bootstrap4では”.mr-auto”というクラスをつけるとそれが実現できます。

以下の例ではNavbarのul部分だけ抜粋しています。Beforeではulタグの中にliタグを3つ羅列しています。３つ目のLoginリンクだけ右寄せしたいとすると、Afterのようにまずulタグを2つに分け、最初のulタグに”.mr-auto”クラスを追加するとイメージ画像のようにログインリンクだけ右寄せできます。

【Before】Navbar ul部分抜粋

<ul class="navbar-nav">
    <li class="nav-item active">
        <a class="nav-link" href="#">Page1 <span class="sr-only">(current)</span></a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">Page2</a>
    </li>
    <li class="nav-item">
        <a class="btn btn-primary" href="#">Login</a>
    </li>
</ul>

↓

【After】Navbar ul部分抜粋

<ul class="navbar-nav mr-auto">
    <li class="nav-item active">
        <a class="nav-link" href="#">Page1 <span class="sr-only">(current)</span></a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">Page2</a>
    </li>
</ul>
 <ul class="navbar-nav">
    <li class="nav-item">
        <a class="btn btn-primary" href="#">Login</a>
    </li>
</ul>

sponsor