Bootstrap3でレスポンシブ機能を無効にする方法

  • 公開日:2014/3/14
この記事は最終更新日から10年以上が経過しています。

続けてBootstrap3ネタです。どんだけBootstrap3好きなんだよって感じですが、Bootstrap3を使った構築が続いているのでこうなっちゃうのです。
で、今回は、Bootstrap3を利用するもののレスポンシブ機能は使わないって時、むしろジャマになっちゃう時の対策です。

その場合でもBootstrapの本体をいじる必要はありません。ちゃんとレスポンシブ機能を無効にするCSSが用意されています。ありがたい。

以下のcssをダウンロードしてbootstrap.min.cssの後で読み込みます。
non-responsive.css

くわしくはココ↓に書いてあります。英語だけど。
http://getbootstrap.com/getting-started/#disable-responsive

超簡単に訳すと、

<!-- 1.以下の記述を削除する -->
<meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;>

<!-- 2.無効用のcssを読み込む -->
<link rel=&quot;stylesheet&quot; href=&quot;css/bootstrap.min.css&quot; media=&quot;screen&quot;>
<link rel=&quot;stylesheet&quot; href=&quot;css/non-responsive.css&quot; media=&quot;screen&quot;>

<!-- 3.以下の記述を削除する -->
<script src=&quot;https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js&quot;></script>

<!-- 4.グリッドシステムを使用するときはカラムの設定は必ずcol-xs-*にする。 -->

そして、サンプルページがNon-responsive Bootstrapにあります。
他にもフラットデザインの無効化とかもあるみたいです。(まだ使ったことないけど)