Tutorial 2x Clean 3 Column Custom Field Lists - Tuỳ biến cột cho danh sách trường tuỳ chỉnh XenForo 2

PVS

Cộng Sự Đặc Biệt
Thành viên BQT
Tham gia
28/02/2015
Bài viết
12,581
Được Like
8,107
Clean 3 Column Custom Field Lists - Tuỳ biến cột cho danh sách trường tuỳ chỉnh XenForo 2

Bạn muốn làm 1-3 cột cho các thiết bị khác nhau?

Hiển thị một trên các thiết bị nhỏ:

1600409423567.png

Hai trên các thiết bị vừa:

1600409496471.png

Và ba trên các thiết bị lớn:

1600409632575.png

Thêm code này vào extra.less
CSS:
.listInline--customField
{
    @media only screen and (max-width: 600px) {
        columns: 1;
        -webkit-columns: 1;
        -moz-columns: 1;
    }
    @media only screen and (min-width: 600px) {
        columns: 2;
        -webkit-columns: 2;
        -moz-columns: 2;
    }
    @media only screen and (min-width: 1050px) {
        columns: 3;
        -webkit-columns: 3;
        -moz-columns: 3;
    }
}

Lưu ý: Sử dụng chiều rộng tối thiểu để làm cho các cột phù hợp với trang web của bạn. Kéo chúng xung quanh và xem liệu bạn có một item nào quá dài mà ngắt thành 2 dòng thay vì ở trong 1; bạn sẽ phải tìm điểm đó để nó nằm trên một đường thẳng. Nếu danh sách của bạn có xu hướng lớn hơn các ví dụ trên, bạn có thể chỉ muốn 1 hoặc 2 cột — điều chỉnh theo yêu cầu để trông đẹp trên trang web của bạn.

Chúc các bạn thành công.


Nguồn: xenforo.com​
 

Hướng dẫn sử dụng

XenForo 1 XenForo 2
Translate by PVS

Top Bottom