Bootstrap 5 Lưới: Thiết bị siêu nhỏ

ví dụ về lưới thiết bị siêu nhỏ

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

Giả sử chúng ta có một bố cục đơn giản với hai cột. Chúng ta muốn cộtTất cảChia nhỏ thiết bị 25% / 75%.

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

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

Dưới đây là ví dụ sẽ dẫn đến việc chia nhỏ 25% / 75% cho tất cả các thiết bị (vô cùng nhỏ, nhỏ, trung bình, lớn, rất lớn và cực lớn):

Mẫu

<div class="container-fluid">
  <div class="row">
    <div class="col-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, biểu tượng của nó là một con gấu trúc ...</p>
    </div>
    <div class="col-9 bg-dark">
      <p>1980 năm, 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 việc bảo vệ đại bàng và môi trường sống của nó ...</p>
    </div>
  </div>
</div>

Thử ngay

Lưu ý:Hãy đả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 việc chia đôi 33.3% / 66.6%, bạn nên sử dụng .col-4 và .col-8（Đối với việc chia đôi 50% / 50%, bạn nên sử dụng .col-6 và .col-6）：

Mẫu

<!-- Chia đôi 33.3%/66.6% -->
<div class="container-fluid">
  <div class="row">
    <div class="col-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, biểu tượng của nó là một con gấu trúc ...</p>
    </div>
    <div class="col-8 bg-dark">
      <p>1980 năm, 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 việc bảo vệ đại bàng và môi trường sống của nó ...</p>
    </div>
  </div>
</div>
<!-- Chia đôi 50%/50% -->
<div class="container-fluid">
  <div class="row">
    <div class="col-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, biểu tượng của nó là một con gấu trúc ...</p>
    </div>
    <div class="col-6 bg-dark">
      <p>1980 năm, 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 việc bảo vệ đại bàng và môi trường sống của nó ...</p>
    </div>
  </div>
</div>

Thử ngay

Cột tự động

Trong Bootstrap 5, có một cách đơn giản để tạo cột tự động cho tất cả các thiết bịCác cột đều rộngChỉ cần từ .col-* Bỏ số đi và chỉ sử dụng trên phần tử col .col Lớp. Bootstrap sẽ nhận biết số lượng cột và mỗi cột sẽ có cùng chiều rộng:

<!-- Hai cột: 50% chiều rộng -->
<div class="row">
  <div class="col">1 của 2</div>
  <div class="col">2 của 2</div>
</div>
<!-- Bốn cột: 25% chiều rộng -->
<div class="row">
  <div class="col">1 của 4</div>
  <div class="col">2 của 4</div>
  <div class="col">3 của 4</div>
  <div class="col">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 chia khác nhau cho thiết bị nhỏ.