Bootstrap 5 lưới: thiết bị trung

Mô hình lưới thiết 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

Giả sử chúng ta có một布局 đơn giản với hai cột. Đối với thiết bị nhỏ, chúng ta muốn tách cột 25% / 75%.

Thiết bị nhỏ được định nghĩa là độ rộng màn hìnhTừ 576 pixel đến 767 pixel。

Đối với thiết bị nhỏ, chúng ta sẽ sử dụng .col-sm-* lớp.

Chúng ta sẽ thêm các lớp sau vào hai cột:

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

Ví dụ sau sẽ tạo ra tách 25% / 75% trên các thiết bị nhỏ (và trung, lớn, siêu lớn và rất lớn). Trên thiết bị siêu nhỏ, nó sẽ tự động xếp chồng (100%):

Mô hình

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-3 bg-primary">
      <p>Tổ chức World Wide Fund for Nature (WWF), được thành lập vào ngày 29 tháng 4 năm 1961, có biểu tượng là con gấu lớn ...</p>
    </div>
    <div class="col-sm-9 bg-dark">
      <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ệ大熊猫 và môi trường sống của chúng ...</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):

Đối với tách 33.3% / 66.6%，bạn nên sử dụng .col-sm-4 và .col-sm-8（Đối với tách 50% / 50%，bạn nên sử dụng .col-sm-6 và .col-sm-6)：

Mô hình

<-- 33.3/66.6% tách: -->
<div class="container-fluid">
  <div class="row">
    <div class="col-sm-4 bg-primary">
      <p>Tổ chức World Wide Fund for Nature (WWF), được thành lập vào ngày 29 tháng 4 năm 1961, có biểu tượng là con gấu lớn ...</p>
    </div>
    <div class="col-sm-8 bg-dark">
      <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ệ大熊猫 và môi trường sống của chúng ...</p>
    </div>
  </div>
</div>
<!-- Phân chia 50%/50%: -->
<div class="container-fluid">
  <div class="row">
    <div class="col-sm-6 bg-primary">
      <p>Tổ chức World Wide Fund for Nature (WWF), được thành lập vào ngày 29 tháng 4 năm 1961, có biểu tượng là con gấu lớn ...</p>
    </div>
    <div class="col-sm-6 bg-dark">
      <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ệ大熊猫 và môi trường sống của chúng ...</p>
    </div>
  </div>
</div>

Thử ngay

cột布局 tự động

Trong Bootstrap 5, có một cách đơn giản để tạo các cột có độ rộng bằng nhau cho tất cả các thiết bị: chỉ cần từ .col-sm-* xóa số và chỉ đặt thuộc tính colsử dụng .col-sm dùng class. Bootstrap sẽ nhận biết có bao nhiêu cột và mỗi cột sẽ có độ rộng như nhau.

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

<!-- Hai cột: độ rộng 50% trên tất cả các màn hình, trừ thiết bị siêu nhỏ (độ rộng 100%) -->
<div class="row">
  <div class="col-sm">1 của 2</div>
  <div class="col-sm">2 của 2</div>
</div>
<!-- Bốn cột: độ rộng 25% trên tất cả các màn hình, trừ thiết bị siêu nhỏ (độ rộng 100%) -->
<div class="row">
  <div class="col-sm">1 của 4</div>
  <div class="col-sm">2 của 4</div>
  <div class="col-sm">3 của 4</div>
  <div class="col-sm">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ị trung bình.