Bootstrap 5 lưới XXL
Ví dụ về lưới XXL
XSmall | Small | Medium | Large | Extra Large | XXL | |
---|---|---|---|---|---|---|
Class prefix | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
.col-xxl- |
Screen width | <576px | >=576px | >=768px | >=992px | >=1200px | >=1400px |
Thiết bị XXL được định nghĩa là có chiều rộng màn hình từ 1400 pixel trở lên .
Ví dụ sau đây sẽ dẫn đến mức chia 50%/50% trên các thiết bị vừa, lớn và cực lớn và mức chia 25%/75% trên các thiết bị XXL. Trên các thiết bị nhỏ và cực nhỏ, nó sẽ tự động xếp chồng (100%):
Ví dụ
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-xxl-3">
<p>Lorem ipsum...</p>
</div>
<div class="col-md-6 col-xxl-9">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
Hãy tự mình thử »Lưu ý: Đảm bảo tổng luôn bằng 12.
Chỉ sử dụng XXL
Trong ví dụ bên dưới, chúng tôi chỉ chỉ định lớp .col-xxl-6
(không có .col-md-*
và/hoặc .col-sm-*
). Điều này có nghĩa là các thiết bị xxlarge sẽ chia tỷ lệ 50%/50%. Tuy nhiên, đối với các thiết bị cực lớn, lớn, trung bình, nhỏ VÀ cực nhỏ, nó sẽ xếp chồng theo chiều dọc (chiều rộng 100%):
Ví dụ
<div class="container-fluid">
<div class="row">
<div class="col-xxl-6">
<p>Lorem ipsum...</p>
</div>
<div class="col-xxl-6">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
Hãy tự mình thử » Cột bố cục tự động
Trong Bootstrap 5, có một cách dễ dàng để tạo các cột có chiều rộng bằng nhau cho tất cả các thiết bị: chỉ cần xóa số khỏi .col-xxl-*
và chỉ sử dụng lớp .col-xxl
trên một số phần tử col được chỉ định. Bootstrap sẽ nhận biết có bao nhiêu cột và mỗi cột sẽ có cùng chiều rộng.
Nếu kích thước màn hình nhỏ hơn 1400px thì các cột sẽ xếp chồng lên nhau theo chiều ngang:
<!-- Two columns: 50% width on xxl and up-->
<div class="row">
<div class="col-xxl">1 of
2</div>
<div class="col-xxl">2 of 2</div>
</div>
<!-- Four
columns: 25% width on xxl and up -->
<div class="row">
<div class="col-xxl">1 of 4</div>
<div class="col-xxl">2 of 4</div>
<div class="col-xxl">3
of 4</div>
<div class="col-xxl">4 of 4</div>
</div>