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％に分割、中型デバイスでは50％/50％に分割、大規模デバイスでは33％/66％に分割しました：

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

しかし、xlargeデバイスでは、20％/80％の分割デザインがより良いかもしれません。

超大型デバイスは、スクリーン幅が 1200ピクセル以上。

xlargeデバイスに対して、以下を使用します： .col-xl-* クラス：

<div class="col-sm-3 col-md-6 col-lg-4 col-xl-2">....</div>
<div class="col-sm-9 col-md-6 col-lg-8 col-xl-10">....</div>

以下の例では、小規模デバイスで25％/75％に分割、中型デバイスで50％/50％に分割、大規模デバイスで33％/66％に分割、xlargeおよびxxlargeで20％/80％に分割されることがあります。超小規模デバイスでは、自動的に並べ替えられます（100％）：

例

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-3 col-md-6 col-lg-4 col-xl-2">
      <p>世界自然保護基金（WWF）は、1961年4月29日に設立され、シロクマを象徴とするシンボルを持っています ...</p>
    </div>
    <div class="col-sm-9 col-md-6 col-lg-8 col-xl-10">
      <p>1980年、WWFは正式に中国に到着し、中国政府の招待により中国に来て大熊猫及其生息地の保護活動を開始しました ...</p>
    </div>
  </div>
</div>

自分で試してみる

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

XLargeのみを使用

以下の例では、 .col-xl-6 クラス（ .col-lg-*、.col-md-* および/または .col-sm-*）。これは、xlarge と xxlarge デバイスが 50%/50% に分割されることを意味しますが、large、medium、small、および extra small デバイスでは垂直に積み重なります（100% 幅）:

例

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

自分で試してみる

自動レイアウト列

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

スクリーンサイズが1200px 未満、列は水平に積み重なります：

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

自分で試してみる