Bootstrap 5 lưới: thiết bị siêu lớn

Ví dụ về lưới thiết bị lớn hơn

XSmall Small Medium Large Extra Large XXL
Tiền tố lớp .col- .col-sm- .col-md- .col-lg- .col-xl- .col-xxl-
Độ rộng màn hình <576px >=576px >=768px >=992px >=1200px >=1400px

Trong chương trước, chúng tôi đã trình bày một ví dụ về lưới, bao gồm các lớp áp dụng cho các thiết bị nhỏ, trung bình và lớn. Chúng tôi đã sử dụng hai div (cột) và chia nhỏ 25%/75% trên các thiết bị nhỏ, 50%/50% trên các thiết bị trung bình, và 33%/66% trên các thiết bị lớn:

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

Nhưng trên các thiết bị xlarge, thiết kế chia nhỏ 20% / 80% có thể tốt hơn.

Thiết bị lớn hơn được định nghĩa là độ rộng màn hình là trên 1200 pixel。

Đối với các thiết bị xlarge, chúng tôi sẽ sử dụng .col-xl-* Loại:

<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>

Dưới đây là ví dụ sẽ dẫn đến việc chia nhỏ 25%/75% trên các thiết bị nhỏ, 50%/50% trên các thiết bị trung bình, 33%/66% trên các thiết bị lớn và chia nhỏ 20%/80% trên các thiết bị xlarge và xxlarge. Trên các thiết bị siêu nhỏ, nó sẽ tự động đ堆叠 (100%):

Mô hình

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-3 col-md-6 col-lg-4 col-xl-2">
      <p>Quỹ thế giới tự nhiên (WWF), được thành lập vào ngày 29 tháng 4 năm 1961, biểu tượng của nó là một con gấu trúc ...</p>
    </div>
    <div class="col-sm-9 col-md-6 col-lg-8 col-xl-10">
      <p>1980 năm, WWF chính thức đến Trung Quốc, được Chính phủ Trung Quốc mời đến Trung Quốc để thực hiện công tác bảo vệ đại bàng đậu đỏ và môi trường sống của chúng ...</p>
    </div>
  </div>
</div>

Thử ngay

Lưu ý:Hãy đảm bảo rằng tổng luôn luôn là 12.

Chỉ sử dụng XLarge

Trong ví dụ dưới đây, chúng tôi chỉ chỉ định .col-xl-6 class (không có .col-lg-*、.col-md-* và/hoặc .col-sm-*）。 Điều này có nghĩa là các thiết bị xlarge và xxlarge sẽ chia 50%/50%. Nhưng đối với các thiết bị lớn, trung, nhỏ và siêu nhỏ, nó sẽ xếp theo chiều dọc (độ rộng 100%):

Mô hình

<div class="container-fluid">
  <div class="row">
    <div class="col-xl-6">
      <p>Quỹ thế giới tự nhiên (WWF), được thành lập vào ngày 29 tháng 4 năm 1961, biểu tượng của nó là một con gấu trúc ...</p>
    </div>
    <div class="col-xl-6">
      <p>1980 năm, WWF chính thức đến Trung Quốc, được Chính phủ Trung Quốc mời đến Trung Quốc để thực hiện công tác bảo vệ đại bàng đậu đỏ và môi trường sống của chúng ...</p>
    </div>
  </div>
</div>

Thử ngay

Cột布局 tự động

Trong Bootstrap 5, có một cách đơn giản để tạo các cột đồng rộng cho tất cả các thiết bị: chỉ cần từ .col-xl-* Xóa số trong đó và chỉ sử dụng trên phần tử col .col-xl Class. Bootstrap sẽ nhận biết có bao nhiêu cột và mỗi cột sẽ có cùng độ rộng.

Nếu kích thước màn hìnhDưới 1200pxCột sẽ xếp theo chiều ngang:

<!-- Hai cột: trên các thiết bị siêu lớn trở lên là 50% độ rộng -->
<div class="row">
  <div class="col-xl">1 của 2</div>
  <div class="col-xl">2 của 2</div>
</div>
<!-- Bốn cột: trên các thiết bị siêu lớn trở lên là 25% độ rộng -->
<div class="row">
  <div class="col-xl">1 của 4</div>
  <div class="col-xl">2 của 4</div>
  <div class="col-xl">3 của 4</div>
  <div class="col-xl">4 của 4</div>
</div>

Thử ngay