ブートストラップ グリッドの例

Bootstrap グリッド システム内での構築に慣れるための基本的なグリッド レイアウト。

これらの例では、テーマを追加するために.themed-grid-colクラスが列に追加されています。これは、Bootstrap でデフォルトで使用できるクラスではありません。

5 つのグリッド層

Bootstrap グリッド システムには、サポートするデバイスの範囲ごとに 1 つずつ、5 つの層があります。各層は最小のビューポート サイズから始まり、オーバーライドされない限り、より大きなデバイスに自動的に適用されます。

.col-4
.col-4
.col-4
.col-sm-4
.col-sm-4
.col-sm-4
.col-md-4
.col-md-4
.col-md-4
.col-lg-4
.col-lg-4
.col-lg-4
.col-xl-4
.col-xl-4
.col-xl-4
.col-xxl-4
.col-xxl-4
.col-xxl-4

3 つの等しい列

デスクトップから始まり、大きなデスクトップまで拡大する3 つの等幅の列を取得します。モバイル デバイス、タブレット以下では、列は自動的に積み重ねられます。

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

3 つの等しい列の代替

クラスを使用する.row-cols-*と、等列のグリッドを簡単に作成できます。

.colの子 .row-cols-md-3
.colの子 .row-cols-md-3
.colの子 .row-cols-md-3

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 v4 グリッド システムには、xs (極小、このクラス インフィックスは使用されません)、sm (小)、md (中)、lg (大)、および xl (特大) の 5 層のクラスがあります。これらのクラスのほぼすべての組み合わせを使用して、より動的で柔軟なレイアウトを作成できます。

クラスの各層はスケールアップします。つまり、md、lg、および xl に同じ幅を設定する場合は、md のみを指定する必要があります。

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

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

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

ガター

クラスを使用.gx-*すると、水平ガターを調整できます。

.col.gx-4樋 付き
.col.gx-4樋 付き
.col.gx-4樋 付き
.col.gx-4樋 付き
.col.gx-4樋 付き
.col.gx-4樋 付き

クラスを使用し.gy-*て垂直ガターを制御します。

.col.gy-4樋 付き
.col.gy-4樋 付き
.col.gy-4樋 付き
.col.gy-4樋 付き
.col.gy-4樋 付き
.col.gy-4樋 付き

クラスを使用.g-*すると、両方向のガターを調整できます。

.col.g-3樋 付き
.col.g-3樋 付き
.col.g-3樋 付き
.col.g-3樋 付き
.col.g-3樋 付き
.col.g-3樋 付き

コンテナ

Bootstrap v4.4 で追加された追加のクラスにより、特定のブレークポイントまで 100% 幅のコンテナーが許可されます。v5 は新しいxxlブレークポイントを追加します。

。容器
.container-sm
.container-md
.container-lg
.コンテナ-xl
.コンテナ-xxl
.コンテナ流体