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

以下の簡単なレイアウトが含まれると仮定します。小さいデバイスでは、25% / 75% の列分割を行いたいと考えています。

小さいデバイスは、スクリーン幅で定義されます576ピクセルから767ピクセルまで。

小さいデバイスでは、以下を使用します、 .col-sm-* クラス。

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

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

以下の例は、小さい（中型、大型、超大型および特大）デバイス上で 25% / 75% の分割を生成します。超小さいデバイスでは、自動的に並べ替えられます（100%）：

例

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

自分で試してみましょう

注意：合計が 12 に等しいかまたはそれ以下であることを確認してください（すべての 12 つの利用可能な列を使用する必要はありません）：

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

例

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

自分で試してみましょう

自動レイアウトカラム

Bootstrap 5 では、すべてのデバイスに対して等幅のカラムを作成する簡単な方法があります： .col-sm-* 中の数字を削除し、 col 要素で使用 .col-sm クラスを使用して、Bootstrap はどれだけのカラムがあるかを認識し、各カラムは同じ幅を取得します。

スクリーンサイズが576px 未満、カラムは水平に並べられます：

<!-- 2カラム：すべてのスクリーンで 50% の幅、超小型デバイス（100% 幅）を除きます -->
<div class="row">
  <div class="col-sm">2 つ中の 1</div>
  <div class="col-sm">2 つ中の 2</div>
</div>
<!-- 4カラム：すべてのスクリーンで 25% の幅、超小型デバイス（100% 幅）を除きます -->
<div class="row">
  <div class="col-sm">4 つ中の 1</div>
  <div class="col-sm">4 つ中の 2</div>
  <div class="col-sm">4 つ中の 3</div>
  <div class="col-sm">4 つ中の 4</div>
</div>

自分で試してみましょう

次の章では、中型デバイスに異なる割合の分割を追加する方法を示します。