【Bootstrap4】ナビゲーションメニューを2列で表示する

前回作成したナビゲーションのメニューを、スマートフォン(以下SP)で表示したときに2列で表示してみます。

メディアクエリ

メディアクエリとはCSSの記述式で、スクリーンのサイズによってあてるスタイルを変更する方法です。これを使いSP表示したときのナビゲーションを2列表示に切り替えます。
@media only screen and (max-width: 766px) {

  /* ここにSP用のスタイルを書く */

}
※この場合は画面の横幅が766px以下の時に適用される。

2列表示にする

ナビゲーションバーの各メニューに display: inline-block; を適用します。inline-blockは各要素を横に並べ、さらに縦横のサイズを指定できます。
nav-itemの横幅を50%未満にしておけば、2つおきに改行されます。
  .navbar-nav{
    display: inline-block;
    width: 100%;
    margin-bottom: 20px;
  }
  .navbar .nav-item {
    margin: 0;
    display: inline-block;
    width: 49%;
  }
down-arrow.png navbar-multiline1.png

装飾

このままだと味気ないので少し装飾してみます。メニューの下段と中央にラインを引いて、見やすくしています。left-item は左に来る要素のclassに追加します。
  .navbar li {
    border-bottom: solid 1px #ddd;
  }
  .navbar li.left-item {
    border-right: solid 1px #ddd;
    padding-right: -1px;
  }
down-arrow.png navbar-multiline2.png

サンプルコード

https://github.com/s-watanabe-apps/bootstrap4-test/tree/feature/navbar-multiline

この記事へのコメント

スポンサーリンク