Bootstrap 5 グリッド:大型デバイス

コース推薦:

大規模デバイスグリッドインスタンス XSmall Small Medium Large Extra Large
XXL クラス接頭辞 .col- .col-sm- .col-md- .col-lg- .col-xl-
.col-xxl- スクリーン幅 <576px >=768px >=992px >=1200px >=1400px

前章では、中小規模デバイスに適したクラスを含むグリッドインスタンスを示しました。2つのdiv(列)を使用し、小さなデバイスでは25%/75%、中型デバイスでは50%/50%に分割しました:

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

ただし、大規模デバイスでは33% / 66%の分割デザインがより良いかもしれません。

大規模デバイスはスクリーン幅992ピクセルから1199ピクセルまで

大規模デバイスでは、以下を使用します .col-lg-* クラス:

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

小さなデバイスでは、以下を使用してください -sm- のクラス。中型デバイスでは、以下を使用してください -md- のクラス。大規模デバイスでは、以下を使用してください -lg- のクラス。

以下の例では、小さなデバイスでは25%/75%、中型デバイスでは50%/50%、大規模、xlargeおよびxxlargeデバイスでは33%/66%に分割されます。超小デバイスでは、自動的にスタックされます(100%):

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

自分で試してみる

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

Largeのみを使用します

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

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

自分で試してみる

自動レイアウト列

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

スクリーンサイズが992px以下、列は水平に並べられます:

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

自分で試してみる