目次

Web制作をやってると「スマホ版いらね。PC版のみでOK。」という案件がたまにあります。レスポンシブの必要がなくても、「Bootstrapのグリッドシステムを使ったほうが自分でごにょごにょ書くより楽だなぁ。」と思う時があります。そんな時はBootstrapのレスポンシブを無効にしなくてはなりません。

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

手順はたったの3ステップです。早速やってみましょう!

metaタグのviewportを削除する

head内に以下の記述があれば削除します。

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

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

以下のCSSをコピーしてもOKです。

 

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

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

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

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

この記事をシェア