Bootstrapのレスポンシブを無効化させる方法を解説！

簡単にレスポンシブWEBサイトやWEBアプリケーションが作成できるBootstrapですが、プロジェクトによっては、予算や仕様の関係でレスポンシブしたくなかったり、できないことってありますよね？

でも、Bootstrapのコンポーネントは使いたい・・・

今回は、そんな時に活用できる「Bootstrapのレスポンシブを無効化させる方法」について解説します！

Bootstrapが提供しているnon-responsive.cssというCSSファイルを追加する方法です。
この方法はBootstrap3で推奨されている方法となりますので利用には注意してください。

上ようなmeta要素がある場合は必ず削除してください。
これは、スマートフォンのブラウザなどでも適切に表示されるようにビューポートの設定をおこなう記述になります。

下のリンクからダウンロードしたnon-responsive.cssを読み込んでください。
これだけで簡単にBootstrapのレスポンシブの無効化ができます。

下がプレビュー付きのサンプルコードになります。

固定幅に設定されているためウィンドウサイズが変更されても、コンテンツ幅が可変することはありません。
.navbarなどのヘッダーコンポーネントも固定幅が維持されています。

大きい画面で見たい場合は下のデモ画面リンクよりご確認ください。

グリッドシステムの画面幅を変更してレスポンシブを無効化する方法です。

Bootstrap4からは、上でご紹介した「non-responsive.cssでレスポンシブを無効化する方法」が、
公式サイトのサポートから外れてしまっているのでこちらを利用しましょう！

「non-responsive.cssでレスポンシブを無効化する方法」と同様に、
上ようなmeta要素がある場合は必ず削除してください。

.containerのmin-widthプロパティの値を適宜、固定幅になるように上書きします。
このとき、直接bootstrap.cssなどのフレームワークのファイルへ上書きしないようにしましょう！

注意点は、画面幅を指定するclassの.xs, .sm, .md, .lg, .xlが付くものは利用しないように注意してください。
もしすでに使っている場合は、.col-md-6のようなclassであれば.col-6のようにに置き換えましょう。

いかがでしたでしょうか？

レスポンシブが主流になっている現在で、もちろん利用ケースは限られますが、
みなさんも、困ったときはぜひこの方法を活用してみてください。