Lưới Bootstrap 5 được xếp chồng lên nhau theo chiều ngang
Ví dụ về lưới: Xếp chồng theo chiều ngang
Hãy tạo một hệ thống lưới cơ bản bắt đầu xếp chồng lên nhau trên các thiết bị cực nhỏ trước khi chuyển sang dạng ngang trên các thiết bị lớn hơn.
Ví dụ sau đây hiển thị bố cục hai cột "xếp chồng lên nhau" đơn giản, nghĩa là nó sẽ dẫn đến tỷ lệ chia 50%/50% trên tất cả các màn hình, ngoại trừ các màn hình nhỏ bổ sung, nó sẽ tự động xếp chồng (100%):
Ví dụ: Xếp chồng theo chiều ngang
<div class="container-fluid">
<div class="row">
<div class="col-sm-6 bg-primary">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-6 bg-dark">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
Hãy tự mình thử » Mẹo: Các số trong lớp .col-sm-*
cho biết div sẽ trải dài bao nhiêu cột (trong tổng số 12). Vì vậy, .col-sm-1
kéo dài 1 cột, .col-sm-4
kéo dài 4 cột, .col-sm-6
kéo dài 6 cột, v.v.
Lưu ý: Đảm bảo rằng tổng cộng tối đa 12 hoặc ít hơn (không bắt buộc bạn phải sử dụng hết 12 cột có sẵn):
Mẹo: Bạn có thể biến bất kỳ bố cục có chiều rộng đầy đủ nào thành bố cục đáp ứng có chiều rộng cố định bằng cách thay đổi lớp .container-fluid
thành .container
:
Ví dụ: Vùng chứa đáp ứng
<div class="container">
<div class="row">
<div class="col-sm-6">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-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- size -*
và chỉ sử dụng lớp .col- size
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. Các lớp kích thước (sm, md, v.v.) xác định thời điểm các cột sẽ phản hồi:
<!-- Two columns: 50% width on all screens, except for extra small (100%
width) -->
<div class="row">
<div class="col-sm">1 of
2</div>
<div class="col-sm">2 of 2</div>
</div>
<!-- Four
columns: 25% width on all screens, except for extra small (100% width)-->
<div class="row">
<div class="col-sm">1 of 4</div>
<div class="col-sm">2 of 4</div>
<div class="col-sm">3
of 4</div>
<div class="col-sm">4 of 4</div>
</div>