Bootstrap3 のレイアウト周りで大切なところメモ

グリッドシステム

12カラムのグリッドレイアウトを使用していて、.col-xs-12 .col-md-8, .col-xs-12 .col-md-4などと使う。
基本的に小さい方の設定が大きい方に伝搬していく設計になっており、col-md-*はcol-lg-*が指定されてない限りlgに当たるような大きいデバイスでも適用される。

	Extra small devices Phones (<768px)	Small devices Tablets (≥768px)	Medium devices Desktops (≥992px)	Large devices Desktops (≥1200px)
Grid behavior	Horizontal at all times	Collapsed to start, horizontal above breakpoints
Container width	None (auto)	750px	970px	1170px
Class prefix	.col-xs-	.col-sm-	.col-md-	.col-lg-
# of columns	12
Column width	Auto	~62px	~81px	~97px
Gutter width	30px (15px on each side of a column)
Nestable	Yes
Offsets	Yes
Column ordering	Yes

この中で、実は大事なのがColumn widthの値。

レイアウトをする時、1:2 で分けたいみたいなときはcol-md-4, col-md-8の様に1:2で分ければいいだけだが、
実際にあるのは、左側に160pxのものを配置して、後の右側は自由に使えば良いみたいときは、160< 81*2なので、col-md-2を左に確保すれば良い。後は右は合わせて10になるようにうまく確保するということになる。

以下のように、.rowを使うとNestすることが出来る

<div class="row">
  <div class="col-sm-9">
    Level 1: .col-sm-9
    <div class="row">
      <div class="col-xs-8 col-sm-6">
        Level 2: .col-xs-8 .col-sm-6
      </div>
      <div class="col-xs-4 col-sm-6">
        Level 2: .col-xs-4 .col-sm-6
      </div>
    </div>
  </div>
</div>