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