Lưới Bootstrap - Xếp chồng lên nhau
Ví dụ về lưới Bootstrap: 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%):
col-sm-6
col-sm-6
Ví dụ: Xếp chồng theo chiều ngang
<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> 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 tổng luôn bằng 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 lớp .container thành .container-fluid :
Ví dụ: Bình 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> Hãy tự mình thử »