WEB制作

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

スポンサーリンク

距離

Bootstrapでヘッダーを作りたい。

ロゴが左端、メニューリストが右端、というよくあるパターンを実装したい。

 

でも、Bootstrapのナビゲーションバーのテンプレートを見ていると、

下記のように、ロゴ(Navbar)のすぐ隣にメニューがある、こんなテンプレばかりですね

 

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

 

 

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

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

これを解決します。

 

解決コード

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

 

ですので、メニュー群を囲っている<div>に justify-content-end のクラスを追加してあげましょう。

 

 

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

 

flexで実装する場合はこちらをどうぞ。

art
【CSS】ヘッダーを固定したら、メニューが左寄せになってしまった! を解決します 

続きを見る

スポンサーリンク

-WEB制作
-, , , ,

© 2024 人生フリーハンド Powered by AFFINGER5