Bootstrap3のレスポンシブを無効にしてグリッドだけを使う

Bootstrapのグリッドレイアウトを使用したいが、レスポンシブは必要ない時の方法をご紹介します。

公式ドキュメント(英語)
http://getbootstrap.com/getting-started/#disable-responsive

作成例(使用されているnon-responsive.cssも参考にして下さい)
http://getbootstrap.com/examples/non-responsive/

1.meta要素のviewportを削除します。

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

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="container">
  <div class="row">
    <div class="col-xs-6">内容</div>
    <div class="col-xs-6">内容</div>
  </div>
  <div class="row">
    <div class="col-xs-4">内容</div>
    <div class="col-xs-4">内容</div>
    <div class="col-xs-4">内容</div>
  </div>
</div>