プログラミング

【Bootstrap】ヘッダーロゴは左端、メニューは右端 とする方法

スポンサーリンク

距離

Bootstrapでヘッダーを作りたい。
その作りたいヘッダーは、ロゴが左端、メニューリストが右端、というよくあるパターンの場合。

でも、Bootstrapのナビゲーションバーのテンプレートを見ていると、
下記のように、ロゴ(Navbar)のすぐ隣にメニューがある、こんなテンプレばかりですね。

ロゴ メニュー1 メニュー2 メニュー3

 

 

やりたいのは、ロゴが左端、メニューリストが右端。

ロゴ(左端)        (右端) メニュー1 メニュー2 メニュー3

これを解決します。

解決コード

Bootstrapの便利なところは、HTMLに、目的のクラスを記述すれば、
CSSの効果が反映されるところですね。

ですので、
メニュー群を囲っている<div>に

justify-content-end のクラスを追加してあげましょう。

 

他にも方法がありますので、詳しく知りたい方はこちらもどうぞ。
navbarの一部を右寄せにする方法

スポンサーリンク

-プログラミング
-, , , , , ,

© 2022 サカらいふ Powered by AFFINGER5