Bootstrap3 レスポンシブを使わず固定幅で使う方法

2013-09-05

Bootstrap3が公開されてしばらくたちますね。2.*のときはレスポンシブと固定幅レイアウトのCSSファイルが別れていたため、簡単に切り替えることができました。が、3になってからは一緒になったので、デフォルトでは全てレスポンシブになってしまいます。

ここではBootstrap3のグリッドシステムだけ使いたくて、レスポンシブにしたくない場合の設定方法を紹介します。

1.meta要素のviewportを削除する

/* 以下を削除する */
<meta name="viewport" content="width=device-width, initial-scale=1.0">

2.containerクラスを以下で上書き

.container {
  max-width: none !important;
  width: 970px;
}

3.navbarを使っているときは崩れるのを避けるため以下のように上書き

.navbar-collapse {
  display: block !important;
  height: auto !important;
  padding-bottom: 0;
  overflow: visible !important;
}

.navbar-toggle {
  display: none;
}

.navbar-brand {
  margin-left: -15px;
}

4.col-xs-*を使用してグリッドレイアウトを構築する

<div class="row">
        <div class="col-xs-4">One third</div>
        <div class="col-xs-4">One third</div>
        <div class="col-xs-4">One third</div>
</div>

これでレスポンシブではなく固定幅でグリッドシステムだけを使うことができます。