Phần bù trong lưới bootstrap là gì?

Ví dụ sau đây cho thấy cách lấy ba cột có chiều rộng bằng nhau bắt đầu từ máy tính bảng và chia tỷ lệ thành máy tính để bàn lớn. Trên điện thoại di động, các cột sẽ tự động xếp chồng lên nhau

col-sm-4

col-sm-4

col-sm-4

Ba cột không bằng nhau

Ví dụ sau đây cho thấy cách lấy ba cột có chiều rộng khác nhau bắt đầu từ máy tính bảng và chia tỷ lệ thành máy tính để bàn lớn

col-sm-3

col-sm-6

col-sm-3

Hai cột không bằng nhau

Ví dụ sau đây cho thấy cách lấy hai cột có chiều rộng khác nhau bắt đầu từ máy tính bảng và chia tỷ lệ thành máy tính để bàn lớn

col-sm-4

col-sm-8

không có máng xối

Sử dụng lớp .row-no-gutters để loại bỏ các máng xối khỏi một hàng và các cột của nó

col-sm-3

col-sm-6

col-sm-3

Hai Cột Với ​​Hai Cột Lồng Nhau

Ví dụ sau đây cho thấy cách lấy hai cột bắt đầu từ máy tính bảng và chia tỷ lệ cho máy tính để bàn lớn, với hai cột khác (có chiều rộng bằng nhau) trong cột lớn hơn (ở điện thoại di động, các cột này và các cột lồng nhau của chúng sẽ xếp chồng lên nhau)

    .col-sm-8
   

col-sm-6

col-sm-6

col-sm-4

Trộn. Di động và Máy tính để bàn

Hệ thống lưới Bootstrap có bốn lớp. xs (điện thoại), sm (máy tính bảng), md (máy tính để bàn) và lg (máy tính để bàn lớn hơn). Các lớp có thể được kết hợp để tạo bố cục năng động và linh hoạt hơn

Mẹo. Mỗi lớp tăng tỷ lệ, vì vậy nếu bạn muốn đặt cùng độ rộng cho xs và sm, bạn chỉ cần chỉ định xs

col-xs-9. col-md-7

col-xs-3. col-md-5

col-xs-6. col-md-10

col-xs-6. col-md-2

col-xs-6

col-xs-6

Mẹo. Hãy nhớ rằng các cột lưới nên cộng tối đa mười hai cho một hàng. Hơn thế nữa, các cột sẽ xếp chồng lên nhau bất kể chế độ xem

Trộn. Di động, Máy tính bảng và Máy tính để bàn

col-xs-7. col-sm-6. col-lg-8

col-xs-5. col-sm-6. col-lg-4

col-xs-6. col-sm-8. col-lg-10

col-xs-6. col-sm-4. col-lg-2

Xóa nổi

Xóa các float (với lớp .clearfix) tại các điểm dừng cụ thể để ngăn gói lạ với nội dung không đồng đều

    Cột 1
   

    Thay đổi kích thước cửa sổ trình duyệt để xem hiệu ứng.
 

Cột 2

Cột 3

Cột 4

Cột bù đắp

Di chuyển các cột sang bên phải bằng cách sử dụng các lớp .col-md-offset-*. Các lớp này tăng lề trái của một cột theo * cột

Nó thực sự tuyệt vời bất cứ khi nào nội dung trên các trang của chúng tôi chỉ đơn giản là mở rộng một cách trôi chảy trên toàn bộ chiều rộng có thể truy cập và thay đổi kích thước và thứ tự một cách phù hợp khi chiều rộng của màn hình hiển thị thay đổi, tuy nhiên, trong một số trường hợp, chúng tôi cần cung cấp cho các tính năng một số khu vực xung quanh để thở. . Không gian trống này cùng với hành vi đáp ứng của các trang web của chúng tôi thực sự là một yếu tố quan trọng trong phong cách của các trang web của chúng tôi

Trong phiên bản mới nhất của khung thân thiện với thiết bị di động nổi tiếng nhất tuyệt đối-- Bootstrap 4 thực sự có một bộ phương pháp cụ thể dành riêng để đặt các phần tử của chúng tôi chính xác ở bất cứ nơi nào chúng tôi yêu cầu và thay đổi vị trí này cũng như sự hấp dẫn trực quan theo chiều rộng của màn hình

Đây là cái gọi là Bootstrap Offset Tooltip và các lớp push / pull. Chúng hoạt động thực sự dễ dàng và theo phong cách bản năng được kết hợp với các tiền tố cấp lưới như -sm-, -md-, v.v.

Cách sử dụng Bootstrap Offset Cách sử dụng

Cú pháp tiêu chuẩn của những cú pháp này khá đơn giản-- bạn có hành động mà bạn phải tham gia-- chẳng hạn như .offset, kích thước lưới nhỏ nhất mà bạn thực sự cần để sử dụng từ trở lên-- giống như -md cộng với một giá trị cho mong muốn

Toàn bộ điều này kết hợp với nhau tạo ra kết quả .row-no-gutters1 sẽ bù phần tử cột mong muốn bằng 3 cột ở bên phải so với vị trí mặc định của nó trên kích thước màn hình trung bình trở lên. Các lớp .offset luôn dịch chuyển nội dung của nó sang bên phải

Tất cả những thứ này đã tạo ra kết quả .row-no-gutters1 sẽ bù phần tử cột mong muốn bằng 3 cột ở bên phải so với vị trí mặc định của nó trên các tỷ lệ màn hình tiêu chuẩn trở lên. Các lớp .offset thường xuyên chuyển nội dung trang web của chính nó sang bên phải

đại diện

Chuyển các cột sang đúng lớp push2 đang hoạt động. Các lớp này nâng lề trái của một cột lên push3 cột. Như một ví dụ,push4 di chuyển push5 trên bốn cột

  
.col-md-4
  
.col-md-4 .offset-md-4


  
.col-md-3 .offset-md-3
  
.col-md-3 .offset-md-3


  
.col-md-6 .offset-md-3

mục hữu ích

Điều quan trọng cần lưu ý ở đây là trực tiếp từ Bootstrap 4 alpha 6, trung tố push6 đã bị hủy theo cách như vậy đối với các kích thước hiển thị nhỏ nhất-- dưới 34em cũng như 554 px, trung tố kích thước lưới bị loại bỏ-- các công cụ bù trừ . Vì vậy, kịch bản ở trên sẽ phát triển thành thứ gì đó giống như push7 và sẽ hoạt động với tất cả các kích thước màn hình hiển thị trừ khi tiêu chuẩn cho chế độ xem rộng hơn được xác định-- bạn có thể làm điều đó bằng cách chỉ cần gán các lớp push8 phù hợp cho cùng một phần tử

Cách tiếp cận này hoạt động trong trường hợp bạn cần tạo kiểu cho một thành phần cụ thể. Tuy nhiên, giả sử rằng vì một lý do nào đó bạn muốn loại bỏ phần tử en trong cùng với những phần tử xung quanh nó, bạn chắc chắn có thể sử dụng các lớp push9 cũng như pull0 về cơ bản làm điều tương tự nhưng lấp đầy vùng trống còn lại bằng phần tử tiếp theo khi . Do đó, ví dụ: trong trường hợp bạn có hai phần cột-- phần thứ nhất rộng 4 cột và phần thứ hai rộng 8 cột (cả hai phần này hoàn thành toàn bộ hàng) áp dụng pull1 cho phần tử đầu tiên và pull2 cho phần tử đầu tiên . Việc bỏ tiền tố pull3 cho tỷ lệ màn hình hiển thị nhỏ nhất cũng được tính ở đây

Và cuối cùng-- xem xét rằng Bootstrap 4 alpha 6 hiển thị các tiện ích flexbox để định vị nội dung web, bạn cũng có thể sử dụng các tiện ích này để sắp xếp lại tài liệu của mình, áp dụng các lớp như pull4 và pull5 để đặt một phần tử ở đầu hoặc ở cuối hàng của nó

kết luận

Vì vậy, thông thường, đó chắc chắn là giải pháp cho một trong những yếu tố quan trọng nhất của hệ thống lưới của Bootstrap 4-- các cột được chỉ định là Trung tâm bù đắp Bootstrap mong muốn và được sắp xếp chính xác như bạn cần bất kể chúng diễn ra như thế nào trong mã. Tuy nhiên, các tiện ích sắp xếp lại thực sự ấn tượng, những thứ cần được tiết lộ trước tiên cũng nên được xác định trước-- điều này chắc chắn sẽ giúp những người đọc mã của bạn dễ dàng tìm hiểu hơn rất nhiều. Nhưng rõ ràng tất cả đều phụ thuộc vào tình huống cụ thể và mục tiêu mà bạn đang thực sự tập trung để thực hiện.

Lưới bù là gì?

Cột offset trong Bootstrap là gì?

Offset 3 trong Bootstrap là gì?

Phần bù Col Md trong Bootstrap là gì?