Bootstrap 5 グリッド：超小型デバイス

超小型デバイスグリッドインスタンス

XSmall Small Medium Large Extra Large XXL
クラス接頭辞 .col- .col-sm- .col-md- .col-lg- .col-xl- .col-xxl-
スクリーン幅 <576px >=576px >=768px >=992px >=1200px >=1400px

2つの列を持つシンプルなレイアウトがあると仮定します。列はすべてのデバイス分割 25% / 75%。

以下のクラスを2つの列に追加します：

<div class="col-3">....</div>
<div class="col-9">....</div>

以下の例では、すべてのデバイス（超小型、小型、中型、大型、超大、特大）の25% / 75%の分割が行われます。

例

<div class="container-fluid">
  <div class="row">
    <div class="col-3 bg-primary">
      <p>世界自然保護基金（WWF）は、1961年4月29日に設立され、そのシンボルは大熊猫です ...</p>
    </div>
    <div class="col-9 bg-dark">
      <p>1980年、WWFは中国政府の招待により中国に正式に到着し、大熊猫とその生息地の保護活動を開始しました ...</p>
    </div>
  </div>
</div>

自分で試してみてください

注意：合計が12（すべての12の可用列を使用する必要はありません）以上でないことを確認してください：

33.3% / 66.6% の分割の場合、次を使用してください .col-4 および .col-8（50% / 50% の分割の場合、次を使用してください .col-6 および .col-6）：

例

<!-- 33.3%/66.6% split -->
<div class="container-fluid">
  <div class="row">
    <div class="col-4 bg-primary">
      <p>世界自然保護基金（WWF）は、1961年4月29日に設立され、そのシンボルは大熊猫です ...</p>
    </div>
    <div class="col-8 bg-dark">
      <p>1980年、WWFは中国政府の招待により中国に正式に到着し、大熊猫とその生息地の保護活動を開始しました ...</p>
    </div>
  </div>
</div>
<!-- 50%/50% split -->
<div class="container-fluid">
  <div class="row">
    <div class="col-6 bg-primary">
      <p>世界自然保護基金（WWF）は、1961年4月29日に設立され、そのシンボルは大熊猫です ...</p>
    </div>
    <div class="col-6 bg-dark">
      <p>1980年、WWFは中国政府の招待により中国に正式に到着し、大熊猫とその生息地の保護活動を開始しました ...</p>
    </div>
  </div>
</div>

自分で試してみてください

自動レイアウト列

Bootstrap 5では、すべてのデバイス用に簡単に自動レイアウト列を作成する方法があります等幅の列：次から .col-* 数字を削除し、col要素のみに使用してください .col クラス。Bootstrapは、列の数を認識し、各列に同じ幅が与えられます：

<!-- 二列：50% 幅 -->
<div class="row">
  <div class="col">1 of 2</div>
  <div class="col">2 of 2</div>
</div>
<!-- 四列：25% 幅 -->
<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>

自分で試してみてください

次の章では、小型デバイスに異なる分割パーセンテージを追加する方法を説明します。