Bootstrap 4 Grid - Lớn

Ví dụ về lưới lớn

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à 50% / 50% trên các thiết bị trung bình:

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

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

Bây giờ Bootstrap sẽ nói "ở kích thước nhỏ, hãy xem các lớp có -sm- trong chúng và sử dụng chúng. Ở kích thước trung bình, hãy xem các lớp có -md- trong chúng và sử dụng chúng. Ở kích thước lớn, hãy xem các lớp có từ -lg- trong chúng và sử dụng chúng ".

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à 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 lớn

Trong ví dụ dưới đây, chúng tôi chỉ xác định .col-lg-6lớp (không có .col-md-*và / hoặc .col-sm-*). Điều này có nghĩa là các thiết bị lớn và lớn sẽ phân chia 50% / 50%. Tuy nhiên, đối với các thiết bị 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-lg-*và chỉ sử dụng .col-lglớ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 992px , các cột sẽ xếp chồng lên nhau theo chiều ngang: