Lưới Bootstrap 5: Từ stack đến ngang

Ví dụ về lưới: Đ堆叠 ngang

Hãy tạo một hệ thống lưới cơ bản, hệ thống này ban đầu sẽ stack trên thiết bị siêu nhỏ, sau đó trở thành ngang trên các thiết bị lớn hơn.

Dưới đây là ví dụ về một layout hai cột đơn giản “Đ堆叠 ngang”, điều này có nghĩa là nó sẽ tạo ra 50%/50% tách biệt trên tất cả các màn hình, trừ màn hình siêu nhỏ, nó sẽ tự động stack (100%):

Ví dụ: Đ堆叠 ngang

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-6 bg-primary">
      <p>Cột 1 ...</p>
    </div>
    <div class="col-sm-6 bg-dark">
      <p>Cột 2 ...</p>
    </div>
  </div>
</div>

Thử ngay

Lưu ý:.col-sm-* Số trong lớp biểu thị số cột div nên chiếm (tổng cộng 12 cột). Vì vậy,.col-sm-1 Chuyển qua 1 cột.col-sm-4 Chuyển qua 4 cột.col-sm-6 Chuyển qua 6 cột, v.v.

Lưu ý:Hãy đảm bảo rằng 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):

Lưu ý:.container-fluid thành lớp .container .containerBạn có thể thay đổi bất kỳ Chiều rộng đầy đủ Chuyển đổi bố cục thành Chiều rộng cố định Bố cục phản hồi:

Mẫu: Khung cảnh phản hồi

<div class="container">
  <div class="row">
    <div class="col-sm-6">
      <p>Cột 1 ...</p>
    </div>
    <div class="col-sm-6">
      <p>Cột 2 ...</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 đồng nhất cho tất cả các thiết bị: chỉ cần từ .col-size-* Bỏ số đi và chỉ sử dụng trên phần tử col .col-size 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. Lớp size (sm, md v.v.) quyết định khi nào các cột nên phản hồi:

<!-- Hai cột: 50% chiều rộng trên tất cả các màn hình, trừ các thiết bị siêu nhỏ (chiều 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: 25% chiều rộng trên tất cả các màn hình, trừ các thiết bị siêu nhỏ (chiều 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