Bootstrap 4 lưới cực nhỏ
Ví dụ về lưới cực nhỏ
Extra small | Small | Medium | Large | Extra Large | |
---|---|---|---|---|---|
Class prefix | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
Screen width | <576px | >=576px | >=768px | >=992px | >=1200px |
Giả sử chúng ta có một bố cục đơn giản với hai cột. Chúng tôi muốn các cột chia 25%/75% cho TẤT CẢ các thiết bị.
Chúng tôi sẽ thêm các lớp sau vào hai cột của chúng tôi:
<div class="col-3">....</div>
<div class="col-9">....</div>
Ví dụ sau đây sẽ dẫn đến tỷ lệ chia 25%/75% trên tất cả các thiết bị (cực nhỏ, nhỏ, trung bình, lớn và xlarge).
Ví dụ
<div class="container-fluid">
<div class="row">
<div class="col-3 bg-success">
<p>Lorem ipsum...</p>
</div>
<div class="col-9 bg-warning">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
Hãy tự mình thử »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):
Để chia 33,3%/66,6%, bạn sẽ sử dụng .col-4
và .col-8
(và để chia 50%/50%, bạn sẽ sử dụng .col-6
và .col-6
):
Ví dụ
<!-- 33.3%/66.6% split -->
<div class="container-fluid">
<div class="row">
<div class="col-4 bg-success">
<p>Lorem ipsum...</p>
</div>
<div class="col-8 bg-warning">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
<!-- 50%/50% split -->
<div class="container-fluid">
<div class="row">
<div class="col-6 bg-success">
<p>Lorem ipsum...</p>
</div>
<div class="col-6 bg-warning">
<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-*
và chỉ sử dụng lớp .col
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:
<!-- Two columns: 50% width-->
<div class="row">
<div class="col">1 of
2</div>
<div class="col">2 of 2</div>
</div>
<!-- Four
columns: 25% width-->
<div class="row">
<div class="col">1 of 4</div>
<div class="col">2 of 4</div>
<div class="col">3
of 4</div>
<div class="col">4 of 4</div>
</div>
Chương tiếp theo trình bày cách thêm phần trăm phân chia khác cho các thiết bị nhỏ.