Bootstrap 5 グリッド：XXL

XXLデバイスグリッドインスタンス

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

XXLデバイスは以下のものと定義されています 1400ピクセル以上のスクリーン幅。

以下の例では、中型、大型、超大型デバイスで50/50の分割が発生し、XXLデバイスでは25/75の分割が発生します。小型および超小型デバイスでは、自動的に並べ替えられます（100%）:

例

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

自分で試してみる

注意：合計が常に12であることを確認してください。

XXLのみを使用

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

例

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

自分で試してみる

自動レイアウト列

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

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

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

自分で試してみる