IT女子のお気に入りフォルダ

管理人の備忘録と実践を兼ねた(出来るだけ)役に立つ情報を配信するブログです。

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

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

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

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

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

超簡単に訳すと、

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

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

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

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

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