Các lớp đẩy/kéo làm gì trong hệ thống lưới điện?

Question

Khi tôi xem xét rất nhiều hệ thống và khung lưới CSS, chúng thường có thiết lập cột và hàng chuẩn với chiều rộng phần trăm. Một cái gì đó như thế này ví dụ:

tiêu chuẩn cột lưới:

.col-10 { 
    width: 83.33333%; 
    width: calc(100%/12 * 10); 
    width: -webkit-calc(100%/12 * 10); 
    width: -moz-calc(100%/12 * 10); } 

Tuy nhiên, ngoài việc này, tôi thường thấy các lớp khác như .push hoặc .pull. Ví dụ như thế này: lớp

push/pull:

.push-10 { 
    left: 83.33333%; 
    left: calc(100%/12 * 10); 
    left: -webkit-calc(100%/12 * 10); 
    left: -moz-calc(100%/12 * 10); } 

.pull-10 { 
    left: -83.33333%; 
    left: calc(-100%/12 * 10); 
    left: -webkit-calc(-100%/12 * 10); 
    left: -moz-calc(-100%/12 * 10); } 

tôi đã đến để sử dụng hệ thống lưới khá một chút nhưng tôi đã không bao giờ cần thiết để sử dụng các lớp này. Có lẽ vì tôi không biết họ làm gì. Vì vậy, câu hỏi của tôi là:

1. Lớp đẩy thường làm gì?
2. Lớp kéo thường làm gì?
3. Khi nào bạn muốn sử dụng mỗi người trong số họ?
4. Làm thế nào để bạn sử dụng mỗi người trong số họ?
5. Cung cấp ví dụ điển hình để minh họa.

Answer 1

Chúng dành cho sắp xếp lại nội dung. Cho phép nói rằng bạn muốn nội dung của mình xuất hiện đầu tiên trong đánh dấu HTML và sau đó là thanh bên thứ hai, nhưng bạn muốn thanh bên đến đầu tiên trong màn hình (ở bên trái) và sau đó là nội dung thứ hai (ở bên phải).

Sử dụng Bootstrap là một ví dụ:

<div class="row"> 
    <div class="col-md-9 col-md-push-3">This is content that comes <strong>first in the markup</strong>, but looks like it comes second in the view.</div> 
    <div class="col-md-3 col-md-pull-9">This is the sidebar, that comes <strong>second in the markup</strong>, but looks like it comes first in the view.</div> 
</div> 

Các col-sm-push-3 phương tiện di chuyển cột 25% so với trái (left: 25%).

col-sm-pull-9 có nghĩa là di chuyển cột 75% từ bên phải (right: 75%).

Vì vậy, trong trường hợp này cột lớn đang được 'đẩy' chiều rộng của cột nhỏ, và cột nhỏ đang được 'kéo' chiều rộng của cột lớn.

Demo using Bootstrap

---

Something như thế này:

.push-10 { 
    left: calc(100%/12 * 10); 
} 

Phương tiện, mất độ rộng của container (100%), chia cho số lượng cột trong lưới điện (12) và nhiều nó theo số bạn muốn đẩy nó bằng (10). Để lại cho bạn 83,33333333%.