Tari
Mataimakan gajerun hannu waɗanda ke gina saman kayan aikin mu na flexbox don yin shimfidar sassa cikin sauri da sauƙi fiye da kowane lokaci.
Stacks suna ba da gajeriyar hanya don amfani da adadin kaddarorin flexbox don ƙirƙirar shimfidu cikin sauri da sauƙi a cikin Bootstrap. Dukkan yabo don ra'ayi da aiwatarwa yana zuwa ga aikin buɗe tushen Pylon .
A tsaye
Yi amfani .vstack
don ƙirƙirar shimfidu a tsaye. Abubuwan da aka tara suna cike da faɗin ta tsohuwa. Yi amfani .gap-*
da kayan aiki don ƙara sarari tsakanin abubuwa.
<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>
A kwance
Yi amfani .hstack
da shimfidu a kwance. Abubuwan da aka tara suna a tsaye a tsakiya ta tsohuwa kuma suna ɗaukar faɗin dole ne kawai. Yi amfani .gap-*
da kayan aiki don ƙara sarari tsakanin abubuwa.
<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>
Amfani da abubuwan amfani a kwance a kwance kamar masu sarari .ms-auto
:
<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>
Kuma tare da ka'idoji na tsaye :
<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>
Misalai
Yi amfani .vstack
da maɓalli da sauran abubuwa:
<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>
Ƙirƙiri fom na layi tare da .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;
}