Bootstrap 5 Grid: Large Devices

Rekomendasyon ng kurso:

Large device grid instance XSmall Small Medium Large Extra Large
XXL Prefix ng klase .col- .col-sm- .col-md- .col-lg- .col-xl-
.col-xxl- Screen width <576px >=768px >=992px >=1200px >=1400px

Sa nakaraang kabanata, ipinapakita namin ang isang halimbawa ng grid kung saan mayroong klase na para sa maliit at medium na aparato. Ginamit namin ang dalawang div (column), at ginamit ang 25% / 75% na paghihiwalay sa maliit na aparato, ang 50% / 50% na paghihiwalay sa medium na aparato:

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

Ngunit sa malaking aparato, ang disenyo ng paghihiwalay na 33% / 66% ay maaaring mas mabuti.

Ang malaking aparato ay tinukoy bilang lapad ng screenMula 992 pixel hanggang 1199 pixel。

Para sa malaking aparato, gagamitin namin ang .col-lg-* Mga klase:

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

Sa maliit na aparato, gamitin ang naglalaman ng -sm- ng klase. Sa medium na aparato, gamitin ang naglalaman ng -md- ng klase. Sa malaking aparato, gamitin ang naglalaman ng -lg- ng klase.

Ang halimbawa na ito ay magiging paghihiwalay sa maliit na aparato ng 25% / 75%，sa medium na aparato ng 50% / 50%，sa malaking, xlarge at xxlarge na aparato ng 33% / 66%。Sa maliit na aparato, ito ay magiging awtomatikong pinapakunan (100%)：

Example

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-3 col-md-6 col-lg-4">
      <p>The World Wide Fund for Nature (WWF), founded on April 29, 1961, has a giant panda as its logo ...</p>
    </div>
    <div class="col-sm-9 col-md-6 col-lg-8">
      <p>1980, WWF officially came to China, invited by the Chinese government to carry out the protection work of giant pandas and their habitats ...</p>
    </div>
  </div>
</div>

Try It Yourself

Note:Make sure the total is equal to or less than 12 (you do not need to use all 12 available columns):

Only use Large

In the following example, we only specify .col-lg-6 class (without .col-md-* and/or .col-sm-*）。This means that large, xlarge, and xxlarge devices will split 50%/50%. However, for medium, small, and extra small devices, it will be vertically stacked (100% width):

Example

<div class="container-fluid">
  <div class="row">
    <div class="col-lg-6">
      <p>The World Wide Fund for Nature (WWF), founded on April 29, 1961, has a giant panda as its logo ...</p>
    </div>
    <div class="col-lg-6">
      <p>1980, WWF officially came to China, invited by the Chinese government to carry out the protection work of giant pandas and their habitats ...</p>
    </div>
  </div>
</div>

Try It Yourself

Automatic Layout Columns

In Bootstrap 5, there is a simple way to create equal-width columns for all devices: just from .col-lg-* Remove the numbers and use only on the col element .col-lg Class. Bootstrap will recognize how many columns there are, and each column will receive the same width.

If the screen sizeLess than 992px, ang mga column ay magiging horizontal stack:

<!-- Two columns: on large and above devices are 50% width -->
<div class="row">
  <div class="col-lg">1 of 2</div>
  <div class="col-lg">2 of 2</div>
</div>
<!-- Four columns: on large and above devices are 25% width -->
<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>

Try It Yourself