[Bootstrap4対応] Bootstrapのレスポンシブを無効にする方法

by おっさんず

レスポンシブサイトを制作する際、とても便利なCSSフレームワークなのが『Bootstrap』です。しかし、時々「レスポンシブを無効にして使いたい」と思う時があったりします。この記事ではBootstrapのレスポンシブを無効にして、固定幅でサイトを構築する方法を解説します。

Bootstrapの非レスポンシブは可能?

バージョン2系の時は通常のCSSとレスポンシブのCSSとでファイルが分かれていました。しかし、3系は一体化になっています。色々調べたところ、公式にレスポンシブを無効にする方法が用意されていました。
http://getbootstrap.com/getting-started/#disable-responsive
→既にページは削除されています

Bootstrap4では非レスポンシブの使用をサポートしないようです。

[blockquote align=”none” author=””]

Bootstrapの非レスポンスでの使用はサポートしない(non-responsive.css は提供しない)

https://cccabinet.jpn.org/bootstrap4/#global-changes

[/blockquote]

しかし、Bootstrap4では、自分で多少の書き換えをすれば実現可能です。

Bootstrap4でレスポンシブを無効にする

BootstrapのCSSを上書する

『non-responsive.css』(ファイル名は任意)を作成し、Bootstrap本体のCSSよりも後に読み込みます。新規作成したCSSファイルにBootstrapの.containerのclassの横幅を上書きする設定を記述します。

マークアップ

カラムはcol-lg -* 、col-md -* 、col-sm-*を指定せず、すべての画面サイズで共通のcol-*を利用します。以下がサンプルです。

Bootstrap3でレスポンシブを無効にする


『non-responsive.css』を読み込む

まず、レスポンシブを無効にするCSSをダウンロードしましょう。
https://getbootstrap.com/examples/non-responsive/non-responsive.css

上記の公式ページはいつの間にか削除されていました。以下の同じ内容のCSSをコピーしてして、『non-responsive.css』のような名前を付けて保存します。


ダウンロード、またはコピーしたものをBootstrapのCSSの下に読み込みます。ファイルを設置する場所は自分の環境に合わせてください。

クラスは『col-xs-*』を指定する

タイトルの通り、グリッドシステムを使う時は必ずクラスに『col-xs-*』を指定して使いましょう。
『col-lg-*』や『col-md-*』ではダメですよ。

まとめ

公式が用意しているCSSを読み込むことで簡単にBootstrapのレスポンシブ無効にすることができます。レスポンシブ実装が多い今日この頃ですが、機会があったら試してみてください。

関連する記事