Hiểu các lớp lưới (col-sm- # và col-lg- #) trong Bootstrap 3

Tôi đang bắt đầu với Bootstrap 3 và tôi gặp một số khó khăn khi hiểu cách sử dụng các lớp lưới.

Đây là những gì tôi đã tìm ra cho đến nay:

Có vẻ như các lớp col-sm-#và col-lg-#khác với lớp cũ col-#ở chỗ chúng sẽ chỉ áp dụng khi màn hình ở trên một kích thước nhất định (tương ứng là 768px và 992px). Nếu bạn bỏ qua -sm- hoặc -lg-, các div sẽ không bao giờ thu gọn thành một cột.

Tuy nhiên, khi tôi tạo hai div bên trong một hàng col-sm-6có vẻ như chúng chỉ nằm cạnh nhau khi cửa sổ có chiều rộng từ 768px đến 992px. Nói cách khác, nếu tôi thu nhỏ cửa sổ tất cả các con đường xuống và sau đó từ từ mở rộng nó, cách bố trí là cột duy nhất, sau đó hai cột, sau đó trở lại cột đơn một lần nữa .

1. Đây có phải là hành vi dự định?
2. Nếu tôi muốn hai cột cho bất kỳ thứ gì trên 768px, tôi có nên áp dụng cả hai lớp không? ( <div class="col-sm-6 col-lg-6">)
3. col-6 Cũng nên được bao gồm?<div class="col-6 col-sm-6 col-lg-6">

[CẬP NHẬT BÊN DƯỚI]

Tôi đã xem lại các tài liệu và có vẻ như tôi đã bỏ qua một phần nói cụ thể về điều này.

Câu trả lời cho câu hỏi của tôi:

1. Có, chúng chỉ áp dụng cho các phạm vi cụ thể, thay vì mọi thứ trên một chiều rộng nhất định.

2. Có, các lớp được kết hợp với nhau.

3. Có vẻ như điều này phù hợp trong một số trường hợp nhất định nhưng không phù hợp trong một số trường hợp khác vì các lớp col- # về cơ bản tương đương với col-xsm- # hoặc, chiều rộng trên 0px (tất cả các chiều rộng).

Ngoài việc đọc tài liệu quá nhanh, tôi nghĩ rằng tôi đã bối rối bởi vì tôi đã vào Bootstrap 3 với "tâm lý Bootstrap 2". Cụ thể, tôi đang sử dụng các kiểu đáp ứng (tùy chọn) (bootstrap-responsive.css) trong v2 và v3 khá khác nhau (cho IMO tốt hơn).

CẬP NHẬT cho bản phát hành ổn định:

Câu hỏi này ban đầu được viết khi RC1 ra mắt. Họ đã thực hiện một số thay đổi lớn trong RC2 vì vậy đối với bất kỳ ai đang đọc điều này bây giờ, không phải mọi thứ được đề cập ở trên vẫn được áp dụng.

Kể từ khi tôi hiện đang viết bài này, các col-*-#lớp học DO dường như áp dụng trở lên. Vì vậy, ví dụ: nếu bạn muốn một phần tử là 12 cột (toàn chiều rộng) cho điện thoại, nhưng hai 6 cột (nửa trang) cho máy tính bảng trở lên, bạn sẽ làm như sau:

<div class="col-xs-12 col-sm-6"> ... //NO NEED FOR col-md-6 or col-lg-6

(Họ cũng thêm một điểm ngắt xs bổ sung sau khi câu hỏi này được viết.)

Ở đây bạn có một hướng dẫn rất hay, giải thích cách sử dụng các lớp lưới mới trong Bootstrap 3.

Nó cũng bao gồm các mixin, v.v.

"Nếu tôi muốn hai cột cho bất kỳ thứ gì trên 768px, tôi có nên áp dụng cả hai lớp không?"

Điều này phải đơn giản như:

<div class="row">
      <div class="col-sm-6"></div>
      <div class="col-sm-6"></div>    
</div>

Không cần phải thêm col-lg-6quá.

Demo: http://www.bootply.com/73119

Cách tốt nhất để hiểu là chỉ cần suy nghĩ từ trên xuống dưới (Máy tính để bàn lớn đến Điện thoại di động)

Thứ nhất, vì B3 là thiết bị di động trước tiên nên nếu bạn sử dụng xs thì các cột sẽ giống nhau từ Máy tính để bàn lớn đến xs (tôi khuyên bạn nên sử dụng xs hoặc sm vì điều này sẽ giữ mọi thứ theo cách bạn muốn trên mọi kích thước màn hình)

Thứ hai, nếu bạn muốn cung cấp chiều rộng khác nhau cho các cột trên các thiết bị hoặc độ phân giải khác nhau, bạn có thể thêm nhiều lớp, ví dụ:

ở trên sẽ thay đổi chiều rộng theo độ phân giải màn hình, HÃY NHỚ tôi đang giữ tổng số cột trong mỗi lớp = 12

Tôi hy vọng câu trả lời của tôi sẽ giúp ích!

Sửa đổi câu trả lời SDP của trên, bạn không cần phải khai báo col-xs-12trong <div class="col-xs-12 col-sm-6">. Bootstrap 3 là ưu tiên cho thiết bị di động, vì vậy mọi cột div được giả định là 100% chiều rộng div theo mặc định - có nghĩa là ở kích thước "xs", nó là 100% chiều rộng, nó sẽ luôn mặc định cho hành vi đó bất kể bạn đặt ở đâu sm, md, lg. Nếu bạn muốn các xscột của mình không phải là 100%, thì bạn thường làm a col-xs-(1-11).

Điều này có thể muộn vì tôi nghĩ hầu hết chúng ta đang sử dụng BS4. Bài viết này đã giải thích tất cả các câu hỏi bạn đã hỏi một cách chi tiết và đơn giản cũng bao gồm những việc cần làm khi nào. Hướng dẫn chi tiết để sử dụng bs4 hoặcbootstrap

https://uxplanet.org/how-the-bootstrap-4-grid-works-a1b04703a3b7