画面サイズの大きさによって、表示をずらして見やすくしてくれるのがカラムレイアウトです。
col-md-６は、画面がmd以上のサイズの時は、６カラム分の幅になるということです。
なお画面全体の幅は１２カラム分です。
ブロックレベル要素であるdiv要素は、本来は一行分を丸々占有します。
しかしこのように記述することで、画面サイズの変動によって、幅を半分にしたりレイアウトを調整することができます。
基本は以上として実践に取り組みます。
576px未満の時、メニューを非表示にするようにします。
スマフォサイズの小さい画面の時に、メニューを折りたたみ横三本線にするイメージです。
nav class="navbar navbar-light bg-light navbar-expand-sm">
navbar-expandでナビゲーションバーを広げます。
但し、sm以上のサイズの時に。
という読み方です。
sm未満、スマフォサイズの時は非表示になります。
サイト名を整える
<a href="#" class="navbar-brand">サイト名</a>
navbar-brandクラスを追加。
ページホームへのリンクを保ちつつ、色を調整します。
表示しているナビゲーションが分かるようにする
現在採用情報のページを表示していることが分かるようactiveクラスを追加します。
<li class="nav-item"><a href="#" class="nav-link active">採用情報</a></li>
【参考・受講】
【木曜】
比較的、電話、メールも少なく仕事に集中しやすいこともあります。
また水曜日は中休みを取る人もいます。
そんな時は職場が静かになることも。
但し翌日木曜日、話相手が出社すると改めて、再び職場は騒然たることもあります。