2016/02/29  Bootstrap 

Bootstrapのカラムを利用していると1つカラムを飛ばしたいときや余白を空けたい、中央に配置したいときがあります。そんなときはカラムのオフセットを使います。

カラムのオフセット

カラムのオフセットを使うには.col-md-offset-*を使います。

例1、左右に余白を入れたい、中央に配置したい場合

例えば、4カラムずつ3つ並んでいる

col-md-4
col-md-4
col-md-4

2カラムにして左右に余白を空けたい場合

左に2カラム空けたいのでcol-md-offset-2を使います。

col-md-4 col-md-offset-2
col-md-4
<div class="row">
  <div class="col-md-4 col-md-offset-2">col-md-4 col-md-offset-2</div>
  <div class="col-md-4">col-md-4</div>
</div>

中央に余白を入れたい場合

左から(1・4・2・4・1 )。左に1カラム空けたいのでcol-md-offset-1を中心に2カラム空けたいのでcol-md-offset-2を使います。

col-md-4 col-md-offset-1
col-md-4 col-md-offset-2
<div class="row">
  <div class="col-md-4 col-md-offset-1">col-md-4 col-md-offset-1</div>
  <div class="col-md-4 col-md-offset-2">col-md-4 col-md-offset-2</div>
</div>

例2、1つずつカラムを飛ばしたい、左側に余白を入れたい場合

例えば、3カラムずつ4つ並んでいる

col-md-3
col-md-3
col-md-3
col-md-3

2カラムにして左に余白を空けたい場合

左に3カラム空けたいのでcol-md-offset-3を使います。

col-md-3 col-md-offset-3
col-md-3 col-md-offset-3
<div class="row">
  <div class="col-md-3 col-md-offset-3">col-md-3 col-md-offset-3</div>
  <div class="col-md-3 col-md-offset-3">col-md-3 col-md-offset-3</div>
</div>