Lưới Bootstrap 5: XXL

Mẫu lưới thiết bị XXL

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

Thiết bị XXL được định nghĩa là có 1400 pixel trở lênchiều rộng màn hình.

Dưới đây là ví dụ về việc chia nhỏ 50%/50% trên các thiết bị vừa, lớn và siêu lớn, và chia nhỏ 25%/75% trên thiết bị XXL. Trên các thiết bị nhỏ và siêu nhỏ, nó sẽ tự động dồn lại (100%):

Mẫu

<div class="container-fluid">
  <div class="row">
    <div class="col-md-6 col-xxl-3">
      <p>Quỹ Bảo vệ Thiên nhiên Thế giới (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-md-6 col-xxl-9">
      <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 đỏ và môi trường sống của nó ...</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 XXL

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

Mẫu

<div class="container-fluid">
  <div class="row">
    <div class="col-xxl-6">
      <p>Quỹ Bảo vệ Thiên nhiên Thế giới (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-xxl-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 đỏ và môi trường sống của nó ...</p>
    </div>
  </div>
</div>

Thử ngay

Cột bố cục tự động

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

Nếu kích thước màn hìnhDưới 1400pxCột sẽ được xếp ngang:

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

Thử ngay