3つの等幅列

デスクトップとワイド・デスクトップに拡大したときには、3つの等幅列を表示する。携帯端末、タブレットなどでは、列が自動的に積み重なる。

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

3つの不等な列

デスクトップとワイド・デスクトップに拡大したときには、さまざまな幅の3つの列を表示する。グリッド列は、1つの水平ブロックに対して12個まで追加する必要がある。それ以上の場合、列はビューポートに関係なく積み重ねを開始する。

.col-md-3
.col-md-6
.col-md-3

2つの列

デスクトップとワイド・デスクトップに拡大したときには、2列で表示。

.col-md-8
.col-md-4

全幅、単一の列

全幅の要素にはグリッドクラスは不要。


入れ子になった2つの列を持つ2つの列

文章ごとに入れ子にするのは簡単。既存の列内に列の行を配置するだけ。これにより、デスクトップとワイド・デスクトップに拡大したときには、2つの列が表示され、大きい列の中に別の2つの等幅列が表示。

モバイルデバイスのサイズ、タブレット以下では、これらの列とその入れ子にした列は積み重なる。

.col-md-8
.col-md-6
.col-md-6
.col-md-4

混在:モバイルとデスクトップ

Bootstrap3のグリッドシステムには、xs(モバイル)、sm(タブレット)、md(デスクトップ)、lg(大型デスクトップ)の4つの階層がある。これらのクラスのほぼすべての組み合わせを使用して、よりダイナミックで柔軟なレイアウトが作成可能。

クラスの各階層はスケールアップされる。つまり、xsとsmに同じ幅を設定する場合は、xsを指定するだけ。

.col-xs-12 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6
.col-xs-6

混在:モバイル、タブレット、デスクトップ

.col-xs-12 .col-sm-6 .col-lg-8
.col-xs-6 .col-lg-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4

列のクリア

特定のブレークポイントで列のリセットをすると、不均等なコンテンツで不自然な折り返しが防止可能。

.col-xs-6 .col-sm-3
ビューポートのサイズを変更するか、スマートフォンで確認
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3

空白、順序変更

特定のブレークポイントで空白列を入れたり、列の順序変更を行う。

.col-sm-5 .col-md-6
.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0
.col-sm-6 .col-md-5 .col-lg-6
.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0

閉じる