Bootstrap Grid - Xếp chồng lên nhau
Ví dụ về lưới Bootstrap: 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%):
col-sm-6
col-sm-6
Ví dụ: Xếp chồng lên nhau
<div class="container">
<h1>Hello World!</h1>
<div class="row">
<div class="col-sm-6" style="background-color:yellow;">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-6" style="background-color:pink;">
<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 ý: Hãy đảm bảo rằng tổng luôn cộng lại với 12!
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">
<h1>Hello World!</h1>
<div class="row">
<div class="col-sm-6" style="background-color:yellow;">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-6" style="background-color:pink;">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>