Bootstrap 4 Grid - Cực lớn

Ví dụ về lưới XLarge

Trong chương trước, chúng tôi đã trình bày một ví dụ về lưới với các lớp dành cho các thiết bị vừa và nhỏ. Chúng tôi đã sử dụng hai div (cột) và chúng tôi đã phân chia 25% / 75% trên các thiết bị nhỏ và mức phân chia 50% / 50% trên các thiết bị trung bình và mức phân chia 33% / 66% trên các thiết bị lớn:

Nhưng trên các thiết bị phóng to, thiết kế có thể tốt hơn với mức phân chia 20% / 80%.

Đối với các thiết bị xlarge, chúng tôi sẽ sử dụng các .col-xl-*lớp:

Ví dụ sau sẽ dẫn đến mức phân chia 25% / 75% trên các thiết bị nhỏ, mức phân chia 50% / 50% trên thiết bị vừa và mức phân chia 33% / 66% trên thiết bị lớn và mức phân chia 20% / 80% trên thiết bị lớn. Trên các thiết bị cực nhỏ, nó sẽ tự động xếp chồng (100%):

Chỉ sử dụng XLarge

Trong ví dụ dưới đây, chúng tôi chỉ xác định .col-xl-6lớp (không có .col-lg-*, .col-md-*và / hoặc .col-sm-*). Điều này có nghĩa là các thiết bị xlarge sẽ phân chia 50% / 50%. Tuy nhiên, đối với các thiết bị lớn, vừa, nhỏ VÀ cực nhỏ, nó sẽ xếp theo chiều dọc (100% chiều rộng):

Các cột bố cục tự động

Trong Bootstrap 4, có một cách dễ dàng để tạo các cột có chiều rộng bằng nhau cho tất cả các thiết bị: chỉ cần xóa số khỏi .col-xl-*và chỉ sử dụng .col-xllớp trên một số phần tử col được chỉ định . Bootstrap sẽ nhận biết có bao nhiêu cột và mỗi cột sẽ có cùng chiều rộng.

Nếu kích thước màn hình nhỏ hơn 1200px , các cột sẽ xếp chồng lên nhau theo chiều ngang: