Bootstrap 4 Lưới xếp chồng lên nhau
Ví dụ về lưới Bootstrap 4: Xếp chồng lên nhau
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ị nhỏ hơn, trước khi trở thành hệ thống nằm ngang trên các thiết bị lớn hơn.
Ví dụ sau cho thấy bố cục hai cột đơn giản "xếp chồng lên nhau", có nghĩa là nó sẽ dẫn đến sự phân 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 lên nhau
<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>
Mẹo: Các số trong các .col-sm-*lớp cho biết div sẽ kéo dài bao nhiêu cột (trong số 12). Vì vậy, .col-sm-1kéo dài 1 cột, .col-sm-4kéo dài 4 cột,
.col-sm-6ké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 tất cả 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 .containerlớp thành .container-fluid:
Ví dụ: Thùng 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>
Các 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 và chỉ sử dụng lớp 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 phải đáp ứng:.col-size-*.col-size
<!-- 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>