end0tknr's kipple - 新web写経開発

http://d.hatena.ne.jp/end0tknr/ から移転しました

bootstrap - 固定レイアウトと可変レイアウト

固定(Fixed)レイアウト

div.container を使うことで、デフォルト940px幅の固定レイアウトを使用出来ます。

<body>
<div class="container">
 ...
</div>
</body>

可変(Fluid)レイアウト

可変レイアウトでは、min-widthやmax-widthで表示幅の最大最小を指定できます。

<body>
  <div class="container-fluid">
    <div class="sidebar"> ... </div>
    <div class="content"> ... </div>
  </div>
</body>

css

.container-fluid > .sidebar {
  float: left;
  width: 220px;
}
.container-fluid > .content {
  float: left;
  min-width: 700px;
  max-width: 1180px;
  margin-left: 20px;
}