Bootstrap 5 グリッド例
- 前のページ BS5 グリッド XXL
- 次のページ BS5 基本テンプレート
以下にBootstrap 5グリッドレイアウトの例をまとめました。
三等分列
指定された数の要素で使用 .col クラスを使用して、Bootstrapは要素の数を認識し（等幅の列を作成します）。以下の例では、3つのcol要素を使用し、各要素の幅は33.33%です。
例
<div class="row"> <div class="col">col</div> <div class="col">col</div> <div class="col">col</div> </div>
数字を使用する三等分列
また、数字を使用して列幅を制御できます。合計が12に達するかそれ以下であることを確認してください（すべての12個の利用可能な列を使用する必要はありません）：
例
<div class="row"> <div class="col-4">col-4</div> <div class="col-4">col-4</div> <div class="col-4">col-4</div> </div>
三不等分列
不等な列を作成するには、数字を使用する必要があります。以下の例では、25%/50%/25%の分割が作成されます：
例
<div class="row"> <div class="col-3">col-3</div> <div class="col-6">col-6</div> <div class="col-3">col-3</div> </div>
一つの列の幅を設定
しかし、一つの列の幅を設定するだけで十分で、兄弟列が周りで自動的に調整されるようにします。以下の例では、25%/50%/25%の分割が作成されます：
例
<div class="row"> <div class="col">col</div> <div class="col-6">col-6</div> <div class="col">col</div> </div>
もっと等しい列があります
例
<!-- 两个相等的列 --> <div class="row"> <div class="col">1 of 2</div> <div class="col">2 of 2</div> </div> <!-- 四个相等的列 --> <div class="row"> <div class="col">1 of 4</div> <div class="col">2 of 4</div> <div class="col">3 of 4</div> <div class="col">4 of 4</div> </div> <!-- 六个相等的列 --> <div class="row"> <div class="col">1 of 6</div> <div class="col">2 of 6</div> <div class="col">3 of 6</div> <div class="col">4 of 6</div> <div class="col">5 of 6</div> <div class="col">6 of 6</div> </div>
Row Cols
また、 .row-cols-* クラス制御は、隣接する列の数（列がいくつあっても）に表示されるべきです：
例
<div class="row row-cols-1"> <div class="col">1 of 2</div> <div class="col">2 of 2</div> </div> <div class="row row-cols-2"> <div class="col">1 of 4</div> <div class="col">2 of 4</div> <div class="col">3 of 4</div> <div class="col">4 of 4</div> </div> <div class="row row-cols-3"> <div class="col">1 of 6</div> <div class="col">2 of 6</div> <div class="col">3 of 6</div> <div class="col">4 of 6</div> <div class="col">5 of 6</div> <div class="col">6 of 6</div> </div>
もっと不等な列があります
例
<!-- 两个不相等的列 --> <div class="row"> <div class="col-8">1 of 2</div> <div class="col-4">2 of 2</div> </div> <!-- 4つの異なる列 --> <div class="row"> <div class="col-2">1 of 4</div> <div class="col-2">2 of 4</div> <div class="col-2">3 of 4</div> <div class="col-6">4 of 4</div> </div> <!-- 2つの列の幅を設定 --> <div class="row"> <div class="col-4">1 of 4</div> <div class="col-6">2 of 4</div> <div class="col">3 of 4</div> <div class="col">4 of 4</div> </div>
同じ高さ
一つの列が別の列よりも高くなる場合（テキストやCSSの高さによる）、残りはそれに従って表示されます：
例
<div class="row"> <div class="col">Lorem ipsum...</div> <div class="col">col</div> <div class="col">col</div> </div>
ネストされた列
以下の例では、一つの列に他の2つの列が含まれる2列レイアウトの作成方法を示しています：
例
<div class="row">
<div class="col-8">
.col-8
<div class="row">
<div class="col-6">.col-6</div>
<div class="col-6">.col-6</div>
</div>
</div>
<div class="col-4">.col-4</div>
</div>
レスポンシブクラス
Bootstrap 5 グリッドシステムには5つのクラスがあります：
.col-(超小規模デバイス - スクリーン幅が576ピクセル未満).col-sm-(小規模デバイス - スクリーン幅が576ピクセル以上).col-md-(中規模デバイス - スクリーン幅が768ピクセル以上).col-lg-(大規模デバイス - スクリーン幅が992ピクセル以上).col-xl-(xlarge デバイス - スクリーン幅が1200px以上).col-xxl-(xxlarge デバイス - スクリーン幅が1400px以上)
上記のクラスを組み合わせて、よりダイナミックで柔軟なレイアウトを作成できます。
ヒント：各クラスは比例で拡大されるため、以下のクラスを組み合わせてよりダイナミックで柔軟なレイアウトを作成できます： sm および md 同じ幅を設定する場合、以下の指定のみが必要です： sm。
スタックから水平
以下の例では、列レイアウトの作成方法を示しています。このレイアウトは最初に超小型デバイス上でスタックされ、次に大きなデバイス（sm、md、lg、xl）上で水平レイアウトに変換されます：
例
<div class="row"> <div class="col-sm-9">col-sm-9</div> <div class="col-sm-3">col-sm-3</div> </div> <div class="row"> <div class="col-sm">col-sm</div> <div class="col-sm">col-sm</div> <div class="col-sm">col-sm</div> </div>
ミックスおよびマッチ
例
<!-- 超小型デバイスでは 50%/50% に分割、大型デバイスでは 75%/25% に分割 --> <div class="row"> <div class="col-6 col-sm-9">col-6 col-sm-9</div> <div class="col-6 col-sm-3">col-6 col-sm-3</div> </div> <!-- 超小型、小型、中型デバイスでは 58%/42% に分割、大型および超大型デバイスでは 66.3%/33.3% に分割 --> <div class="row"> <div class="col-7 col-lg-8">col-7 col-lg-8</div> <div class="col-5 col-lg-4">col-5 col-lg-4</div> </div> <!-- 小型デバイスでは 25%/75% に分割、中型デバイスでは 50%/50% に分割、大型および超大型デバイスでは 33%/66% に分割。超小型デバイスでは自動的にスタック（100%）になります --> <div class="row"> <div class="col-sm-3 col-md-6 col-lg-4">col-sm-3 col-md-6 col-lg-4</div> <div class="col-sm-9 col-md-6 col-lg-8">col-sm-9 col-md-6 col-lg-8</div> </div>
gutter なし
列間の間隔（追加のスペース）を変更するには、以下のいずれかを使用してください .g-1|2|3|4|5 クラス（.g-4 デフォルト値です）。
装飾線（gutter）を完全に削除するには、以下を使用してください .g-0：
例
<div class="row g-0">
- 前のページ BS5 グリッド XXL
- 次のページ BS5 基本テンプレート
