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つのdiv（列）を使用し、それらに25% / 75%の分割を与えました：

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

しかし、中型デバイスでは、50% / 50%の分割のデザインがより良いかもしれません。

中型デバイスは、スクリーン幅が以下のように定義されます：768ピクセルから991ピクセルまで。

中型デバイスでは、以下を使用します： .col-md-* クラス：

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

小型デバイスでは、次のクラスを使用してください： -sm- のクラス。中型デバイスでは、次のクラスを使用してください： -md- のクラス。

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

例

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

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

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

Mediumのみを使用

の例では、 .col-md-6 クラス（ .col-sm-*）。これは、中型、大型、超大型、およびXXLデバイスが50% / 50%に分割されることを意味します。しかし、小型および超小型デバイスでは垂直に並べられます（100%の幅）：

例

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

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

自動レイアウト列

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

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

<!-- 2つの列：中型以上のデバイスでは 50% の幅 -->
<div class="row">
  <div class="col-md">1 of 2</div>
  <div class="col-md">2 of 2</div>
</div>
<!-- 4つの列：中型以上のデバイスでは 25% の幅 -->
<div class="row">
  <div class="col-md">1 of 4</div>
  <div class="col-md">2 of 4</div>
  <div class="col-md">3 of 4</div>
  <div class="col-md">4 of 4</div>
</div>

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

次の章では、大規模なデバイスに異なる分割パーセンテージを追加する方法を示します。