グリッドシステム

ページの横幅に対して12等分し、n個分のブロックを一つのボックスとします。一つの行を構成する場合は、div.rowを挟みます。

列幅の指定

4等分

カラム1
カラム2
カラム3
カラム4

1/3と2/3

カラムA
カラムB

<h2>列幅の指定</h2>
<h3>4等分</h3>
<div class="row">
<div class="col-xs-3" style="background: green; height: 100px">カラム1</div>
<div class="col-xs-3" style="background: blue; height: 100px">カラム2</div>
<div class="col-xs-3" style="background: red; height: 100px">カラム3</div>
<div class="col-xs-3" style="background: yellow; height: 100px">カラム4</div>
</div>

<h3>1/3と2/3</h3>
<div class="row">
<div class="col-xs-4" style="background: orange; height: 100px">カラムA</div>
<div class="col-xs-8" style="background: purple; height: 100px">カラムB</div>
</div>