Hãy không phức tạp Bootstrap!
Lưu ý cách col-sm chiếm 100% chiều rộng (trong các điều khoản khác được chia thành dòng mới) bên dưới 576pxnhưng col thì không. Bạn có thể nhận thấy chiều rộng hiện tại ở trung tâm hàng đầu trong gif.
Đây là mã:
<div class="container">
<div class="row">
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
</div>
<div class="row">
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
</div>
</div>
Bootstrap theo mặc định sắp xếp tất cả các cột (col) trong một hàng có chiều rộng bằng nhau. Trong trường hợp này, ba colsẽ chiếm 100% / 3 chiều rộng mỗi chiều, bất kể kích thước màn hình. Bạn có thể nhận thấy rằng trong gif.
Bây giờ nếu chúng ta chỉ muốn hiển thị một cột trên mỗi dòng tức là cung cấp chiều rộng 100% cho mỗi cột nhưng chỉ dành cho màn hình nhỏ hơn thì sao? Bây giờ đến các col-xxlớp học!
Tôi đã sử dụng col-smvì tôi muốn chia các cột thành các dòng riêng biệt dưới 576px. 4 col-xxlớp này được Bootstrap cung cấp cho các thiết bị hiển thị khác nhau như điện thoại di động, máy tính bảng, máy tính xách tay, màn hình lớn, v.v.
Vì vậy, col-smsẽ phá vỡ dưới 576px, col-mdsẽ phá vỡ dưới 768px, col-lgsẽ phá vỡ dưới 992px và col-xlsẽ phá vỡ dưới 1200px
Lưu ý rằng không có col-xslớp trong bootstrap 4.
Điều này khá nhiều tổng hợp. Bạn có thể trở lại làm việc.
Nhưng có thêm một chút cho nó. Bây giờ đến col-*và col-xx-*để tùy chỉnh chiều rộng.
Hãy nhớ trong ví dụ trên tôi đã đề cập rằng colhoặc col-xxlấy chiều rộng bằng nhau trong một hàng. Vì vậy, nếu chúng ta muốn cung cấp thêm chiều rộng cho một cụ thể, colchúng ta có thể làm điều này.
Hàng bootstrap được chia thành 12 phần, vì vậy trong ví dụ trên có 3 phần colnên mỗi phần lấy 12/3 = 4 phần. Bạn có thể coi những phần này là một cách để đo chiều rộng.
Chúng tôi cũng có thể viết rằng trong định dạng col-*tức là col-4như thế này:
<div class="row">
<div class="col-4">col</div>
<div class="col-4">col</div>
<div class="col-4">col</div>
</div>
Và nó sẽ không có gì khác biệt bởi vì theo mặc định, bootstrap cho chiều rộng bằng col(4 + 4 + 4 = 12).
Nhưng, nếu chúng ta muốn đưa 7 phần cho 1 col, 3 phần cho 2 colvà phần còn lại 2 (12-7-3 = 2) cho thứ 3 col(7 + 3 + 2 thì tổng cộng là 12), chúng ta chỉ cần làm điều này:
<div class="row">
<div class="col-7">col-7</div>
<div class="col-3">col-3</div>
<div class="col-2">col-2</div>
</div>
và bạn có thể tùy chỉnh độ rộng của col-xx-*các lớp cũng có.
<div class="row">
<div class="col-sm-7">col-sm-7</div>
<div class="col-sm-3">col-sm-3</div>
<div class="col-sm-2">col-sm-2</div>
</div>
Nó trông như thế nào trong hành động?
Nếu tổng của colhơn 12 thì sao? Sau đó, colsẽ thay đổi / điều chỉnh để dòng dưới đây. Có, có thể có bất kỳ số lượng cột cho một hàng!
<div class="row">
<div class="col-12">col-12</div>
<div class="col-9">col-9</div>
<div class="col-6">col-6</div>
<div class="col-6">col-6</div>
</div>
Điều gì sẽ xảy ra nếu chúng ta muốn 3 cột liên tiếp cho màn hình lớn nhưng chia các cột này thành 2 hàng cho màn hình nhỏ?
<div class="row">
<div class="col-12 col-sm">col-12 col-sm TOP</div>
<div class="col col-sm">col col-sm</div>
<div class="col col-sm">col col-sm</div>
</div>
Bạn có thể chơi xung quanh đây: https://jsfiddle.net/JerryGidel/6vqno0Lm/
pxkích thước của mỗi kích thước.