Bootstrap 5 Lưới: Thiết bị trung

Ví dụ về lưới thiết bị trung bình

XSmall Small Medium Large Extra Large XXL
tiền tố lớp .col- .col-sm- .col-md- .col-lg- .col-xl- .col-xxl-
Độ rộng màn hình <576px >=576px >=768px >=992px >=1200px >=1400px

Trong chương trước, chúng tôi đã trình bày một ví dụ về lưới, bao gồm các lớp cho các thiết bị nhỏ. Chúng tôi đã sử dụng hai div (cột) và cho chúng 25% / 75% sự chia nhỏ:

<div class="col-sm-3">....</div>
<div class="col-sm-9">....</div>

Nhưng trên các thiết bị trung bình, thiết kế chia nhỏ 50% / 50% có thể tốt hơn.

Thiết bị trung bình được định nghĩa là độ rộng màn hìnhTừ 768 pixel đến 991 pixel.

Đối với các thiết bị trung bình, chúng tôi sẽ sử dụng .col-md-* Lớp:

<div class="col-sm-3 col-md-6">....</div>
<div class="col-sm-9 col-md-6">....</div>

Trên các thiết bị nhỏ, hãy sử dụng bao gồm -sm- của lớp. Trên các thiết bị trung bình, hãy sử dụng bao gồm -md- của lớp.

Dưới đây là ví dụ sẽ dẫn đến sự chia nhỏ 25% / 75% trên các thiết bị nhỏ và 50% / 50% trên các thiết bị trung bình (và lớn, siêu lớn và rất lớn):

Mẫu

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-3 col-md-6">
      <p>Quỹ thế giới tự nhiên (WWF), được thành lập vào ngày 29 tháng 4 năm 1961, biểu tượng là con gấu trúc ...</p>
    </div>
    <div class="col-sm-9 col-md-6">
      <p>Năm 1980, WWF chính thức đến Trung Quốc, được chính phủ Trung Quốc mời đến Trung Quốc để thực hiện công tác bảo vệ voi đực và môi trường sống của nó ...</p>
    </div>
  </div>
</div>

Thử ngay

Lưu ý:Đảm bảo tổng số bằng hoặc nhỏ hơn 12 (không cần sử dụng tất cả 12 cột có sẵn):

Chỉ sử dụng Medium

Trong ví dụ sau, chúng ta chỉ định .col-md-6 class (không có .col-sm-*）。 Điều này có nghĩa là các thiết bị trung, lớn, siêu lớn và XXL sẽ phân tách 50% / 50% - vì lớp này sẽ mở rộng. Nhưng đối với các thiết bị nhỏ và siêu nhỏ, sẽ stack thẳng đứng (độ rộng 100%):

Mẫu

<div class="row">
  <div class="col-md-6">
    <p>Quỹ thế giới tự nhiên (WWF), được thành lập vào ngày 29 tháng 4 năm 1961, biểu tượng là con gấu trúc ...</p>
  </div>
  <div class="col-md-6">
    <p>Năm 1980, WWF chính thức đến Trung Quốc, được chính phủ Trung Quốc mời đến Trung Quốc để thực hiện công tác bảo vệ voi đực và môi trường sống của nó ...</p>
  </div>
</div>

Thử ngay

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

Trong Bootstrap 5, có một cách đơn giản để tạo các cột đồng độ cho tất cả các thiết bị: chỉ cần từ .col-md-* Bỏ số đi và chỉ sử dụng trên thẻ col .col-md class. Bootstrap sẽ xác định số cột và mỗi cột sẽ có cùng độ rộng.

Nếu kích thước màn hìnhDưới 768pxCột sẽ stack ngang:

<!-- Hai cột: ở thiết bị trung型 và lớn hơn là 50% độ rộng -->
<div class="row">
  <div class="col-md">1 của 2</div>
  <div class="col-md">2 của 2</div>
</div>
<!-- Bốn cột: ở thiết bị trung型 và lớn hơn là 25% độ rộng -->
<div class="row">
  <div class="col-md">1 của 4</div>
  <div class="col-md">2 của 4</div>
  <div class="col-md">3 của 4</div>
  <div class="col-md">4 của 4</div>
</div>

Thử ngay

Chương tiếp theo sẽ trình bày cách thêm tỷ lệ phân tách khác nhau cho thiết bị lớn.