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="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にあります。
他にもフラットデザインの無効化とかもあるみたいです。(まだ使ったことないけど)