Bootstrap のグリッド システムはフレックスボックスで構築されており、ページ上に最大 12 列を許可します。
12 列すべてを個別に使用したくない場合は、それらを組み合わせて幅の広い列を作成できます。
| span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 |
| span 4 | span 4 | span 4 | |||||||||
| span 4 | span 8 | ||||||||||
| span 6 | span 6 | ||||||||||
| span 12 | |||||||||||
グリッド システムは応答性が高く、列は画面サイズに応じて自動的に再配置されます。
合計が 12 以下であることを確認してください (使用可能な 12 列すべてを使用する必要がない場合)。
Bootstrap 5 グリッド システムには 6 つのクラスがあります。
.col- (超小型デバイス - 画面幅 576 ピクセル未満).col-sm- (小型デバイス - 画面幅 576 ピクセル以上).col-md- (中型デバイス - 画面幅 768px 以上).col-lg- (大型デバイス - 画面幅が 992px 以上).col-xl- (xlarge デバイス - 画面幅 1200 ピクセル以上).col-xxl- (xxlarge デバイス - 画面幅 1400 ピクセル以上)上記のクラスを組み合わせて、より動的で柔軟なレイアウトを作成できます。
ヒント: 各クラスはスケールアップされるため、sm と md を同じ幅に設定する場合は、 sm を指定するだけです。
Bootstrap 5 グリッドの基本構造は次のとおりです。
<!-- 列の幅と、さまざまなデバイスでの列の表示方法を制御します --> <div class="row"> <div class="col-*-*"></div> <div class="col-*-*"></div> </div> <div class="row"> <div class="col-*-*"></div> <div class="col-*-*"></div> <div class="col-*-*"></div> </div> <!-- または、Bootstrap にレイアウトを自動的に処理させます--> <div class="row"> <div class="col"></div> <div class="col"></div> <div class="col"></div> </div>
最初の例: 行を作成します (<div class="row">)。 次に、必要なだけ列を追加します ( .col-*-* などの適切なタグを使用します)。 最初の星 (*) は応答性 (sm、md、lg、xl、または xxl) を表し、2 番目の星は数値を表し、各行の合計は 12 になります。
2 番目の例: 各 col に数値を追加する代わりに、ブートストラップでレイアウトを処理して同じ幅の列を作成します: 2 つの "col" 要素 = 50% 1 列あたりの幅と 3 つの列 = 1 列あたりの幅 33.33%。 4 列 = 25% 幅など。 .col-sm|md|lg|xl|xxl を使用して列をレスポンシブにすることもできます。
以下に、いくつかの基本的な Bootstrap 5 グリッド レイアウトの例をまとめました。
次の例は、すべてのデバイスと画面幅にわたって 3 つの等しい幅の列を作成する方法を示しています。
<div class="row"> <div class="col">.col</div> <div class="col">.col</div> <div class="col">.col</div> </div>
以下の例は、タブレットから開始して特大デスクトップまで拡張する 4 つの等しい幅の列を作成する方法を示しています。 幅が 576 ピクセル未満の携帯電話または画面では、列は自動的に積み重なって表示されます。
<div class="row"> <div class="col-sm-3">.col-sm-3</div> <div class="col-sm-3">.col-sm-3</div> <div class="col-sm-3">.col-sm-3</div> <div class="col-sm-3">.col-sm-3</div> </div>
次の例は、タブレット上で幅の異なる 2 つの列を取得し、非常に大きなデスクトップに拡張する方法を示しています。
<div class="row"> <div class="col-sm-4">.col-sm-4</div> <div class="col-sm-8">.col-sm-8</div> </div>