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