Bootstrapでヘッダーを作りたい。
その作りたいヘッダーは、ロゴが左端、メニューリストが右端、というよくあるパターンの場合。
でも、Bootstrapのナビゲーションバーのテンプレートを見ていると、
下記のように、ロゴ(Navbar)のすぐ隣にメニューがある、こんなテンプレばかりですね。
ロゴ メニュー1 メニュー2 メニュー3
やりたいのは、ロゴが左端、メニューリストが右端。
ロゴ(左端) (右端) メニュー1 メニュー2 メニュー3
これを解決します。
目次
解決コード
Bootstrapの便利なところは、HTMLに、目的のクラスを記述すれば、
CSSの効果が反映されるところですね。
ですので、
メニュー群を囲っている<div>に
justify-content-end のクラスを追加してあげましょう。
他にも方法がありますので、詳しく知りたい方はこちらもどうぞ。
navbarの一部を右寄せにする方法