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.
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ở .
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.
<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 .hstack
cho 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.
<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-auto
dấu cách:
<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 :
<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;
}