【Bootstrap】ヘッダーをレスポンシブに横スクロール対応

はじめに

ウィンドウを小さくすると、ヘッダーのレイアウトがくずれてしまう。
これを解決するために、Qiitaと同じように、表示部の幅を超えた所で横スクロールできるようにする。

完成図

前提

使用環境は以下の通りである。

No	項目	内容
1	OS	Mac
2	Ruby	2.6.3
3	rails	6.0.4
4	bootstrap-sass	3.4.1
5	sass-rails	5.1.0

実装

上記のサイトを参考に実装した。
ヘッダーの構成は以下のようになっている。

app/views/layouts/_header.html.erb

...
      <ul class="nav navbar-nav navbar-right">
        <li><%= link_to "ホーム",   root_path %></li>
        <li><%= link_to "人気記事",   posts_path %></li>
        <li><%= link_to "人気ユーザー",  users_path %></li>
...

上記親要素『.nav』と、その子要素『li』についてsassで記載する。

custom.scss

.nav {
//　ウィンドウが小さくなり、画面に収まらなくなると、横スクロールが表示される。
  overflow-x: auto;
// 要素全体が垂直ではなく横並びにする。
  display: flex;
  li {
// 文字が自動で折り返さないようにする。
    white-space: nowrap;
  }
}

これでウィンドウを狭めた時に、文字が入りきらなくなるタイミングで、横スクロールが表示され、ヘッダーのレイアウトが崩れることがなくなった。

さいごに

下記を実装して、横スクロール対応をした。
・文字を折り返しにしない。=> white-space: nowrap;
・垂直に並べない。 => display: flex;
・ウィンドウサイズに合わせて表示方法を変える。=> overflow-x: auto;

ナビゲーションバーにもさまざまな設定がありそうなので、機会があればいろいろ試してみたいと思う。