【Bootstrap4】navbarを2段にしてみた。
こんにちは、マリンです。
大変おひさしぶりになってしまいました。
いろいろと仕事獲得のために動いてまして・・・
つまり何も進展がなくて書くことがなかっただけです。
今回「既存のHPを自由にレスポンシブしちゃって!」と言うとある課題を頂きましたので、
その時に行った表題の件です。
概要
基本、ホームページのスタイリングにはBootstrap4を使っております。
デフォルトのnav
ですが、ご存知の通りnavbar-brand
含め左寄せです。
これを画面の幅に合わせて、
広い時はロゴを上段、ナビを下段。
狭い時はインラインにしたいと思いました。
ついでにナビを中央揃えにします。
navbarを2段にする
float: none;じゃ上手くいかない!
いろいろ調べたのですが、Bootstrap3でのやり方ばかりで4の情報がなく、
それでは上手くいかなくて困り果てた挙句、本家のソースを見に行きました。
問題はこいつです!
display: flex;
Bootstrap3まではfloat
で位置を指定していたので、
float: none;
でできたようなのですが、
4からはこのdisplay: flex;
を使っているのでこいつが使えないのですね。
display: flex;とは?
CSS3から導入されたレイアウトモードです。
これまでfloat
などを使ってコンテンツをレイアウトしていたものを、
より柔軟に、かつ簡単にレイアウト出来るようになりました。
そしてレスポンシブデザインでも便利そうです。
詳しくはこちらをご覧ください。
まだ対応していないブラウザもあるようなのでご注意ください!
navbarを2段にする方法
では本題です。
1. クラスを追加する
スタイルの上書きのためのclass
を追加します。
追加するのはナビの一番の親に当たる<nav>
です。
<nav class="navbar navbar-toggleable-md navbar-light bg-faded gnav">
最後のgnav
がそれです。(名前は任意)
2. スタイルを上書きする
追加したクラスにスタイルをあてます。
.gnav { flex-direction: column; }
flex-direction : カラムをどの方向に並べるかを指定するプロパティです。
column : 文を改行した時に向う方向に並べます。わかりにくですが、通常上から下です。
値については他にもいろいろあるので調べてみてください。
以上です!
長い時間ハマったのが馬鹿みたいなくらい簡単でした・・・
詳しくはこちらをご覧ください。
http://scene-live.com/page.php?page=57
navを中央揃えにする
無事2段にはできましたが、
このままでは「ロゴが中央なのにナビは左寄せ」
という現象が起きます。(理由は後ほど)
なのでナビを中央揃えにします。
1. ul
の幅を100%にする
ナビのリストを囲っているul
の幅を100%にしてください。
ul { width: 100%; }
これをやらないとこの後の処理をいくらやっても真ん中に入ってくれません。
2. クラスを追加する
中央寄せにするためのclass
を追加します。
<ul class="navbar-nav navbar-justified">
最後のnavbar-justified
がそれです。(名前は任意)
3. スタイルを上書きする
追加したクラスにスタイルをあてます。
.navbar-justified { justify-content: center; }
justifiy-content : コンテンツの横方向の位置を指定するプロパティです。
center : 中央揃えにします。
このほかに均等配置にするspace-between
などいろいろあります。
詳しくはこちらをご覧ください。
http://scene-live.com/page.php?page=59
これで無事に完了です!
ロゴが中央なのにナビは左寄せ
前にお話ししたこれです。
原因は2つあります。
原因1 : navbar-navにはコンテンツの配置指定がない
親の.navbar
にはデフォルトでjustifiy-content: space-between;
が指定されています。
しかし<ul>
についてるクラスのnavbar-nav
にはついていません。
そのため、<ul>
の範囲外のnavbar-brand
であるロゴは中央配置になったのですね。
原因2 : ulの幅
原因1に気づいて一生懸命指定しましたが、最初うまくいきませんでした。
そこでデベロッパーツールで見てみると、
<ul>
が左に寄って、かつ幅が狭かったのです。
その幅の中で真ん中にはなっているけど、
そもそもの幅が狭かったせいで全体の中央にこなかったのですね。
まとめ
今回は本当に良い勉強になりました!
何よりも、今までちんぷんかんぷんだった本家のソースとか見ちゃってる自分に感動ですw
でもフレームワークを使用する場合、
思ったようにならない時は元のソースを見ることも必要ですね。
補足
最終的なコードを載せておきます。
ただしこの記事を書いた当時のコードが残っていなかったことと、
Bootstrapのバージョンが上がったことで多少当時と変わっています。
付け焼き刃で急いで試したもので、改善が必要な点が多々あります。
後述しますのでそちらの注意もご覧ください。
<補足時の動作環境>
Rails5
Bootstrap 4.1.1
<ソースコード>
<nav class="navbar navbar-expand-lg navbar-light bg-light" style="flex-direction: column"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li> </ul> </div> </nav>
<変更点>
記事ではnav
とul
にクラスをつけて、それぞれ2段にするスタイルと、
中央寄せにするスタイルをつけましたが、Bootstrap4.1.1で試したところ、
nav
に直接スタイルをつける方法でないとflex-direction: column
が効きませんでした。
おそらくnav
についている.navbar-expand-lg
と言うクラスのflex-direction
が優先されているからと思われます。
!important
でいけるかと思いましたが、私の環境ではうまくいきませんでした。
次にul
の方ですが、今回試したところわざわざ中央寄せのスタイルを書かなくても、
自動的に真ん中に寄ってくれました。
なので今回は削除してあります。
<注意点>
上記のコードでは画面を小さくした時のハンバーガーまで
2段の中央寄せになってします。
また、コンテンツの位置を手軽に設定できる
justify-content-~
が使えると便利かと思ったのですが、
そちらは効きませんでした。
これらの改善点も一緒し修正したかったのですが、
まずは早急に補足を書きたかったので至らない点が多々あり申し訳ありません。
またいろいろと試してみてきちんと記事を書こうと思います。