IT技術にまつわる実験ノート

「長編を書くより、短編を数多く完成させてください。それが上達への近道です」 by 手塚治虫

自作Webアプリ「IT勉強会用 名刺ジェネレーター」を公開しました!ぜひご活用ください😀

https://it-benkyoukai-meishi.herokuapp.com/

Bootstrap4 の navbar がPC画面で横並びにならない問題

解決方法

navbar-expand-md や navbar-expand-lg などを使う。

f:id:matt-note:20190304172035p:plain

 

f:id:matt-note:20190304172523p:plain

f:id:matt-note:20190304172138p:plain

f:id:matt-note:20190304172203p:plain

f:id:matt-note:20190304172229p:plain

-> PC画面で navbar を横並びにすることができた。

 

.navbar-expand-{*} は、PC画面では要素を横並びにする。ウィンドウの幅を狭くすると、要素は縦並びになる。レスポンシブ対応をする上でも .navbar-expand-{*} は必須になる。

 

なお、navbar の右部分だけを右寄せにする場合は、右寄せする部分に ml-auto を付ける。

f:id:matt-note:20190304172351p:plain

f:id:matt-note:20190304172416p:plain

 

f:id:matt-note:20190304173019p:plain

 

まとめ

Bootstrap4 で navbar を使う時は、navbar-expand-{*} と一緒に使う必要がある。