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]

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ỏ:

​

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

​

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

​

Thêm code này vào extra.less

.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​