Web Marina

日々の業務や勉強などで得た知識をアウトプットしていきます。

【Bootstrap4】navbarを2段にしてみた。

f:id:song-of-life1352607:20170220105406j:plain

こんにちは、マリンです。

大変おひさしぶりになってしまいました。

いろいろと仕事獲得のために動いてまして・・・

つまり何も進展がなくて書くことがなかっただけです。

今回「既存のHPを自由にレスポンシブしちゃって!」と言うとある課題を頂きましたので、

その時に行った表題の件です。



概要

基本、ホームページのスタイリングにはBootstrap4を使っております。

デフォルトのnavですが、ご存知の通りnavbar-brand含め左寄せです。

f:id:song-of-life1352607:20170603224850j:plain


これを画面の幅に合わせて、

広い時はロゴを上段、ナビを下段。

狭い時はインラインにしたいと思いました。

ついでにナビを中央揃えにします。

f:id:song-of-life1352607:20170603224747j:plain


float: none;じゃ上手くいかない!

いろいろ調べたのですが、Bootstrap3でのやり方ばかりで4の情報がなく、

それでは上手くいかなくて困り果てた挙句、本家のソースを見に行きました。

github.com




問題はこいつです!

  display: flex;




Bootstrap3まではfloatで位置を指定していたので、

float: none;でできたようなのですが、

4からはこのdisplay: flex;を使っているのでこいつが使えないのですね。


display: flex;とは?

CSS3から導入されたレイアウトモードです。

これまでfloatなどを使ってコンテンツをレイアウトしていたものを、

より柔軟に、かつ簡単にレイアウト出来るようになりました。

そしてレスポンシブデザインでも便利そうです。


詳しくはこちらをご覧ください。

www.webcreatorbox.com

まだ対応していないブラウザもあるようなのでご注意ください!


では本題です。


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




無事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>

<変更点>

記事ではnavulにクラスをつけて、それぞれ2段にするスタイルと、

中央寄せにするスタイルをつけましたが、Bootstrap4.1.1で試したところ、

navに直接スタイルをつける方法でないとflex-direction: columnが効きませんでした。

おそらくnavについている.navbar-expand-lgと言うクラスのflex-directionが優先されているからと思われます。

!importantでいけるかと思いましたが、私の環境ではうまくいきませんでした。


次にulの方ですが、今回試したところわざわざ中央寄せのスタイルを書かなくても、

自動的に真ん中に寄ってくれました。

なので今回は削除してあります。


<注意点>

上記のコードでは画面を小さくした時のハンバーガーまで

2段の中央寄せになってします。

また、コンテンツの位置を手軽に設定できる

justify-content-~が使えると便利かと思ったのですが、

そちらは効きませんでした。


これらの改善点も一緒し修正したかったのですが、

まずは早急に補足を書きたかったので至らない点が多々あり申し訳ありません。

またいろいろと試してみてきちんと記事を書こうと思います。