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>

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です