Bootstrapのnavbarの一部を右寄せにする方法を解説!

この記事では、Bootstrapのnavbarの一部を右寄せにする方法を解説しています。Bootstrapで作成したnavbarの中身のレイアウトは、Bootstrapのクラスを利用して右寄せや左寄せなど、簡単に整えることができます。

コンテンツ [表示]

  1. 1Bootstrapのnavbarの一部の要素を右寄せにしたい
  2. 2Bootstrapのnavbarの一部の要素を右寄せにする方法
  3. 3Bootstrapのnavbarのリストの一部を右寄せにする方法

Bootstrapのnavbarの一部の要素を右寄せにしたい

下記のサンプルコードのナビゲーションバー部分を見てください。「Qumeruカフェ」「ホーム」「食事」は左寄せで、「検索」の部分だけ右寄せになっていますね。

このように、navbarの中の一部の要素を右寄せにする方法を解説していきます!

※プレビュー画面を大きくして見てください。

Bootstrapのnavbarの一部の要素を右寄せにする方法

ナビゲーションバーに含まれる要素に.ml-auto.mr-autoクラスを適用することで、要素を右寄せ・左寄せで配置することができます。
 

.ml-autoのmlはmargin-leftを意味し、このクラスを指定すると自動的に左に余白がつき、右寄せになります。.mr-autoはmargin-rightで、右に余白が付き、左寄せになります。
.ml-autoが右寄せ、.mr-autoが左寄せでクラスの名前と左右逆になっているので注意してください。

先程紹介したサンプルコードのように、検索の部分を右寄せにしたい場合には以下のように記述します!

form要素を右寄せにする

<form class="form-inline ml-auto">
        <label class="sr-only" for="keyword">サイト内検索</label>
        <input type="search" class="form-control form-control-sm mr-2" placeholder="検索" id="keyword">
        <button type="submit" class="btn btn-warning btn-sm">検索</button>
</form>

formタグのクラス属性に.ml-autoが指定されています。これによって、検索フォームが右寄せになっています。

Bootstrapのnavbarのリストの一部を右寄せにする方法

次は、以下のようにナビゲーションバーのリストの一部を右寄せにする方法を解説します。
一つ前のやり方だと、このように同じ要素内の一部を寄せたい場合に困りますよね。

このような場合はまず、右寄せにしたいものとそうでないもので別々のulタグに入れるようにします。

ulタグを分けたコード

<!--左寄せにしたい-->
<ul class="navbar-nav">
        <li class="nav-item"><a href="#" class="nav-link">ホーム</a></li>
        <li class="nav-item"><a href="#" class="nav-link active">食事</a></li>
</ul>
<!--右寄せにしたい-->
<ul class="navbar-nav">
        <li class="nav-item"><a href="#" class="nav-link">予約</a></li>
</ul>

そして、この2つのulタグのうち、右寄せにしたい方に.ml-autoクラスを指定します。

ml-autoを指定する

<ul class="navbar-nav ml-auto">

こうすることで、右寄せにするものとそうでないものの間に余白が入り、一部だけ右寄せにすることができます!
※逆に、右寄せにしない方に.mr-autoクラスを指定することでも同様のレイアウトを作成できます。

GeekHive採用サイト

関連記事