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

全幅、1 列

全幅要素にはグリッド クラスは必要ありません。


2 つのネストされた列を持つ 2 つの列

ドキュメントによると、ネストは簡単です。既存の列内に列の行を配置するだけです。これにより、デスクトップから始まり、大きなデスクトップにスケーリングする 2 つの列が提供され、大きな列内に別の 2 つの (等しい幅) が表示されます。

モバイル デバイスのサイズ、タブレット以下では、これらの列とそのネストされた列がスタックされます。

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

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

Bootstrap 3 グリッド システムには、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-sm-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