bootstrapグリッドシステムでのカラム並び方

スポンサーリンク

すぐに忘れてしまうBootstrapのグリッドシステムの並び方についてまとめてみました。

グリッドシステムは、横のカラムの最大数が12になっています。PC、タブレット、スマートフォンのサイズになった時に、横並びのままにするのか、縦に並べるのかをcol-md-、col-sm-、col-xs-のクラスの組み合わせで設定ができます。

クラス名 動作
col-md- 992px以上(デスクトップPCなら)横並び
col-sm- 768px以上(タブレット)なら横並び
col-xs- 常に横並び

PCの時だけ横並びの例(md)

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

タブレット以上なら横並びの例(sm)

col-sm-3
col-sm-3
col-sm-3
col-sm-3

常に横並びの例(xs)

col-xs-3
col-xs-3
col-xs-3
col-xs-3

スマホなら1列、タブレットなら2列、PCなら4列に横並びの例

.col-xs-12 .col-sm-6 .col-md-3
.col-xs-12 .col-sm-6 .col-md-3
.col-xs-12 .col-sm-6 .col-md-3
.col-xs-12 .col-sm-6 .col-md-3

スマホなら1列、タブレットなら2列、PCなら4列に横並びの例

①.col-md-4 .col-md-push-4
②.col-md-4 .col-md-push-4
③.col-md-4 .col-md-pull-8

スマホなら縦並び、タブレットとPCなら横並びで、スマホの時は順番を入れ替える例

①.col-md-4 .col-md-push-4
②.col-md-4 .col-md-push-4
③.col-md-4 .col-md-pull-8

これは、このテーマのフッターで使用している例です。
フッター部分を3分割にして、PCとタブレットの時は、左端にブログのロゴが表示されるようになっていますが、スマホの時は、一番下になるようにしています。

1カラム飛ばして表示

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

オフセットクラスを利用すると、列を飛ばすこともできます。このテーマでは、「前の記事」「次の記事」のページ送りで使用しています。

スポンサーリンク

逆引き辞典 

この記事と一緒によく読まれています!