Mga stack
Mga shorthand helper na nagtatayo sa ibabaw ng aming mga flexbox utilities upang gawing mas mabilis at mas madali ang layout ng bahagi kaysa dati.
Nag-aalok ang mga stack ng shortcut para sa paglalapat ng ilang katangian ng flexbox upang mabilis at madaling makagawa ng mga layout sa Bootstrap. Ang lahat ng kredito para sa konsepto at pagpapatupad ay napupunta sa open source na proyekto ng Pylon .
Patayo
Gamitin .vstack
upang lumikha ng mga patayong layout. Ang mga naka-stack na item ay full-width bilang default. Gumamit .gap-*
ng mga utility upang magdagdag ng espasyo sa pagitan ng mga 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>
Pahalang
Gamitin .hstack
para sa mga pahalang na layout. Ang mga naka-stack na item ay patayong nakasentro bilang default at kinukuha lamang ang kinakailangang lapad ng mga ito. Gumamit .gap-*
ng mga utility upang magdagdag ng espasyo sa pagitan ng mga 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>
Paggamit ng pahalang na margin utility tulad .ms-auto
ng mga 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>
At may mga vertical na panuntunan :
<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>
Mga halimbawa
Gamitin .vstack
upang i-stack ang mga button at iba pang elemento:
<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>
Lumikha ng inline na form na may .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;
}