Ngăn xếp

Trình trợ giúp viết tắt dựa trên các tiện ích flexbox của chúng tôi để giúp bố trí thành phần nhanh hơn và dễ dàng hơn bao giờ hết.

Trên trang này

Stacks cung cấp một lối tắt để áp dụng một số thuộc tính flexbox để tạo bố cục trong Bootstrap một cách nhanh chóng và dễ dàng. Tất cả tín dụng cho khái niệm và triển khai đều được chuyển cho dự án Pylon nguồn mở .

Đứng lên! Hỗ trợ cho các tiện ích khoảng trống với flexbox gần đây đã được thêm vào Safari, vì vậy hãy xem xét xác minh hỗ trợ trình duyệt dự định của bạn. Bố cục lưới sẽ không có vấn đề gì. Đọc thêm .

Theo chiều dọc

Sử dụng .vstackđể tạo bố cục dọc. Các mục xếp chồng có chiều rộng đầy đủ theo mặc định. Sử dụng .gap-*các tiện ích để thêm không gian giữa các mục.

Mục đầu tiên

Mặt hàng thứ hai

Mặt hàng thứ ba

<div class="vstack gap-3">
  <div class="bg-light border">First item</div>
  <div class="bg-light border">Second item</div>
  <div class="bg-light border">Third item</div>
</div>

Nằm ngang

Sử dụng .hstackcho bố cục ngang. Các mục xếp chồng được căn giữa theo chiều dọc theo mặc định và chỉ chiếm chiều rộng cần thiết của chúng. Sử dụng .gap-*các tiện ích để thêm không gian giữa các mục.

Mục đầu tiên

Mặt hàng thứ hai

Mặt hàng thứ ba

<div class="hstack gap-3">
  <div class="bg-light border">First item</div>
  <div class="bg-light border">Second item</div>
  <div class="bg-light border">Third item</div>
</div>

Sử dụng các tiện ích lề ngang như .ms-autodấu cách:

Mục đầu tiên

Mặt hàng thứ hai

Mặt hàng thứ ba

<div class="hstack gap-3">
  <div class="bg-light border">First item</div>
  <div class="bg-light border ms-auto">Second item</div>
  <div class="bg-light border">Third item</div>
</div>

Và với các quy tắc dọc :

Mục đầu tiên

Mặt hàng thứ hai

Mặt hàng thứ ba

<div class="hstack gap-3">
  <div class="bg-light border">First item</div>
  <div class="bg-light border ms-auto">Second item</div>
  <div class="vr"></div>
  <div class="bg-light border">Third item</div>
</div>

Các ví dụ

Sử dụng .vstackđể xếp các nút và các phần tử khác:

<div class="vstack gap-2 col-md-5 mx-auto">
  <button type="button" class="btn btn-secondary">Save changes</button>
  <button type="button" class="btn btn-outline-secondary">Cancel</button>
</div>

Tạo một biểu mẫu nội dòng với .hstack:

<div class="hstack gap-3">
  <input class="form-control me-auto" type="text" placeholder="Add your item here..." aria-label="Add your item here...">
  <button type="button" class="btn btn-secondary">Submit</button>
  <div class="vr"></div>
  <button type="button" class="btn btn-outline-danger">Reset</button>
</div>

Sass

.hstack {
  display: flex;
  flex-direction: row;
  align-items: center;
  align-self: stretch;
}

.vstack {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-self: stretch;
}