Pile
Èd kout ki bati sou sèvis piblik flexbox nou yo pou fè konpozisyon eleman pi rapid ak pi fasil pase tout tan.
Stacks ofri yon chemen kout pou aplike yon kantite pwopriyete flexbox pou kreye kouman yo byen vit ak fasil nan Bootstrap. Tout kredi pou konsèp ak aplikasyon an ale nan pwojè Pylon sous louvri .
Vètikal
Sèvi ak .vstack
yo kreye layout vètikal. Atik anpile yo plen lajè pa default. Sèvi ak .gap-*
sèvis piblik pou ajoute espas ant atik yo.
<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>
Orizontal
Itilize .hstack
pou layout orizontal. Atik anpile yo vètikal santre pa default epi sèlman pran lajè nesesè yo. Sèvi ak .gap-*
sèvis piblik pou ajoute espas ant atik yo.
<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èvi ak sèvis piblik maj orizontal tankou .ms-auto
kòm espas:
<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>
Ak règ vètikal :
<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>
Egzanp yo
Sèvi .vstack
ak pile bouton ak lòt eleman:
<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>
Kreye yon fòm inline ak .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;
}