Tumpukan
Helpers shorthand sing dibangun ing ndhuwur utilitas flexbox kita kanggo nggawe tata letak komponen luwih cepet lan luwih gampang saka tau.
Tumpukan nawakake trabasan kanggo ngetrapake sawetara properti flexbox kanggo nggawe tata letak kanthi cepet lan gampang ing Bootstrap. Kabeh kredit kanggo konsep lan implementasine menyang proyek Pylon open source .
Vertikal
Gunakake .vstack
kanggo nggawe tata letak vertikal. Item sing ditumpuk minangka standar. Gunakake .gap-*
utilitas kanggo nambah spasi ing antarane 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>
Horisontal
Gunakake .hstack
kanggo tata letak horisontal. Item sing ditumpuk vertikal dipusatake kanthi standar lan mung njupuk jembar sing dibutuhake. Gunakake .gap-*
utilitas kanggo nambah spasi ing antarane 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>
Nggunakake utilitas margin horisontal kaya .ms-auto
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>
Lan karo aturan vertikal :
<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>
Tuladha
Gunakake .vstack
kanggo tumpukan tombol lan unsur liyane:
<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>
Gawe formulir inline kanthi .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;
}