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

簡単にレスポンシブWEBサイトやWEBアプリケーションが作成できるBootstrapですが、プロジェクトによってはレスポンシブにはしたくないなんてことはありませんか?そこで、今回はBootstrapのレスポンシブを無効化させる方法を解説します!

コンテンツ [表示]

  1. 1Bootstrapのレスポンシブを無効化させる方法
  2. 1.1non-responsive.cssでレスポンシブを無効化する方法
  3. 1.2グリッドシステムの画面幅を変更してレスポンシブを無効化する方法
  4. 2まとめ

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

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

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

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

Photo byTemplune

non-responsive.cssでレスポンシブを無効化する方法

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

【HTML】non-responsive.cssでレスポンシブを無効化する方法

<meta name="viewport" content="width=device-width, initial-scale=1">

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

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

non-responsive.css
non-responsive.cssのファイルへのリンクです。

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

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

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

Non-responsive Template for Bootstrap
デモ画面はこちらからご確認いただけます

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

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

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

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

<meta name="viewport" content="width=device-width, initial-scale=1">

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

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

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

.container {
  min-width: 1200px;/* 値は適宜変更してください */
}

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

まとめ

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

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

【期間限定】全カリキュラム無料で提供中!

Qumeru

Qumeru[クメル]ではプログラミング学習が出来るカリキュラムを期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひカリキュラムをお試し下さい!

関連記事

【期間限定】全カリキュラム無料で提供中!

Qumeru[クメル]ではプログラミング学習の全カリキュラムを期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひお試し下さい!

目次

Qumeru事務局
ライター

Qumeru事務局