Tumpukan
Pembantu ringkas yang membina di atas utiliti flexbox kami untuk menjadikan reka letak komponen lebih pantas dan lebih mudah berbanding sebelum ini.
Tindanan menawarkan pintasan untuk menggunakan beberapa sifat flexbox untuk membuat reka letak dengan cepat dan mudah dalam Bootstrap. Semua kredit untuk konsep dan pelaksanaan diberikan kepada projek Pylon sumber terbuka .
Menegak
Gunakan .vstack
untuk membuat susun atur menegak. Item bertindan adalah lebar penuh secara lalai. Gunakan .gap-*
utiliti untuk menambah ruang antara item.
<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>
Mendatar
Gunakan .hstack
untuk susun atur mendatar. Item bertindan dipusatkan secara menegak secara lalai dan hanya mengambil lebar yang diperlukan. Gunakan .gap-*
utiliti untuk menambah ruang antara item.
<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>
Menggunakan utiliti margin mendatar seperti .ms-auto
sebagai spacer:
<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>
Dan dengan peraturan menegak :
<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>
Contoh
Gunakan .vstack
untuk menyusun butang dan elemen lain:
<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>
Buat borang sebaris dengan .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;
}