"Ngang ở mọi thời điểm" nghĩa là gì?

Question

Tài liệu Bootstrap ba mới explains the grid behaviour là "Ngang tại mọi thời điểm" cho các thiết bị phụ nhỏ. Điều đó có nghĩa là gì? Chắc chắn trên một thiết bị nhỏ, tất cả các cột sẽ được xếp chồng lên nhau theo chiều dọc? Điều làm tôi thất vọng ở đây là sự thiếu hiểu biết của tôi về lưới điện là gì.

Tôi đến từ góc độ không phải nhà thiết kế và cố gắng lặp qua một số sản phẩm vào lưới đáp ứng. Số lượng cột trong mỗi hàng sẽ thay đổi phụ thuộc vào việc số lượng sản phẩm lẻ hoặc thậm chí có được hiển thị hay không. < - Bootstrap, và có vẻ như đơn giản với nội dung tĩnh trên các trang động. Ví dụ: chúng ta có phải điền vào ô trống <div class="col-xs*"></div> để làm tối đa 12 không?

Answer 1

Điều gì "Ngang ở mọi thời điểm" có nghĩa là không có điểm dừng mà tại đó col-xs- * sẽ thay đổi từ đang được thả nổi thành xếp chồng. Ví dụ:

<div class="col-xs-6"></div> 
<div class="col-xs-6"></div> 

Trong ví dụ này, sẽ luôn có hai cột có kích thước bằng nhau, cho dù bạn đang sử dụng điện thoại, máy tính bảng hay máy tính để bàn. Đối với độ tương phản:

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

Trong ví dụ này, các cột sẽ được xếp chồng cho đến khi chế độ xem của thiết bị> = 768, tại thời điểm này, cột sẽ chuyển sang hai cột có kích thước bằng nhau.

Câu hỏi mà bạn có thể tự hỏi là "Tại sao tất cả các biến thể này?" Vâng, những gì các tùy chọn này cung cấp cho chúng tôi là khả năng tùy chỉnh bố trí trên các thiết bị khác nhau mà không cần phải làm cho bàn tay của chúng tôi bị bẩn trong CSS. Ví dụ, nếu tôi muốn hai cột bằng trên một chiếc điện thoại, nhưng một 75/25 split trên máy tính bảng trở lên, tôi sẽ làm như sau:

<div class="col-xs-6 col-sm-8"></div> 
<div class="col-xs-6 col-sm-4"></div> 

nếu bạn muốn xếp chồng lên nhau trên điện thoại, tương đương trên máy tính bảng, và 75/25 trên máy tính để bàn, sau đó thực hiện việc này:

<div class="col-sm-6 col-md-8"></div> 
<div class="col-sm-6 col-md-4"></div> 

Vì bạn không chỉ định rõ ràng lưới cho điện thoại, nó sẽ hoàn nguyên về xếp chồng.

Để cảm nhận chắc chắn, hãy ném một số lưới đơn giản lại với nhau, sau đó bắt đầu thay đổi kích thước trình duyệt của bạn. Bạn sẽ có thể thấy cách nó thay đổi dễ dàng hơn nhiều so với bản thân tài liệu.

EDIT

tưởng của một ví dụ khác có thể được quan tâm: hai cột bằng ở cả hai điện thoại và máy tính bảng, sau đó 75/25 và máy tính để bàn. Mã:

<div class="col-xs-6 col-md-8"></div> 
<div class="col-xs-6 col-md-4"></div> 

Đây thực sự là một minh họa tuyệt vời về "Ngang mọi lúc." Bởi vì chúng tôi không xác định một col-sm, col-xs tiếp tục được thực thi cho đến khi chúng tôi nhấn breakpoint máy tính để bàn, được thiết lập tại> = 992.