Edited at

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

More than 1 year has passed since last update.

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


やりたいこと

BootstrapのNavbarで、

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

けど、スマホのハンバーガーメニューではすべての要素を左寄せにしたい。

(ネットで見つけた解決策の多くでは、スマホの方でも右寄せとなってしまって、悲しい気分になった。)

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


やりかた

左右で2つの<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>

以上です。