Lưới Bootstrap 4 xếp chồng lên nhau
Ví dụ về lưới Bootstrap 4: Xếp chồng theo chiều ngang
Chúng tôi sẽ tạo một hệ thống lưới cơ bản bắt đầu được 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">
<div class="row">
<div class="col-sm-6 bg-success">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-6 bg-warning">
<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 cố định nào thành bố cục có chiều rộng đầy đủ bằng cách thay đổi lớp .container
thành .container-fluid
:
Ví dụ: Bình chứa chất lỏng
<div class="container-fluid">
<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 4, 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 xác định khi nào 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>