トップページ >  Bootstrap >  Bootstrapのグリッドレイアウト
初版2014/06/15： 最終更新日2014/06/15
  Bootstrapのグリッドレイアウト
目次
・Bootstrapのグリッドレイアウト
・オフセットを設定する
Bootstrapのグリッドレイアウト
Bootstrapではdivタグを使用してグリッドレイアウトを実現します。

<div class="container">
  <div class="row">
    <div class="col col-md-1">
      <!-- 内容 -->
    </div>
  </div>
</div>

上記は1行1列ですが、class="col"内にclass="col col-md-数字"属性を指定したdivタグを記述すると列を増やすことができます。
数字には1～12を指定でき、最大12列まで増やすことが可能です。1と言うのは幅のことで、12とすると12列分列幅をとるという意味です。

グリッドレイアウトを使用したDEMOです。

オフセットを設定する
Bootstrapのグリッドレイアウトでは、class="col"内に"col-md-offset-数字"属性を指定して、オフセットを設定することができます。
この場合の数字もオフセットの幅であり、2とすると左側に2列分の空白列が表示されます。

<div class="container">
  <div class="row">
    <div class="col col-md-1" style="background-color:red;">1列</div>
  </div>
  <div class="row">
    <div class="col col-md-1 col-md-offset-2" style="background-color:red;">1列</div>
    <div class="col col-md-1 col-md-offset-3" style="background-color:blue;">11列</div>
  </div>
</div>

グリッドレイアウトのオフセットを使用したDEMOです。

"col-md-2 col-md-offset-3"とすると、以下のようになります。
<div class="container">
  <div class="row">
    <div class="col col-md-1" style="background-color:red;">1列</div>
  </div>
  <div class="row">
    <div class="col col-md-2 col-md-offset-3" style="background-color:red;">1列</div>
    <div class="col col-md-1 col-md-offset-3" style="background-color:blue;">9列</div>
    <div class="col col-md-1" style="background-color:blue;">10列</div>
    <div class="col col-md-1" style="background-color:blue;">11列</div>
    <div class="col col-md-1" style="background-color:blue;">12列</div>
  </div>
</div>

グリッドレイアウトのオフセットを使用したDEMOです。

HOME