Mga stack

Mga shorthand nga katabang nga nagtukod sa ibabaw sa among flexbox utilities aron mas paspas ug mas sayon ang layout sa component.

Niini nga panid

Nagtanyag ang mga stack og usa ka shortcut alang sa paggamit sa daghang mga kabtangan sa flexbox aron dali ug dali nga makahimo og mga layout sa Bootstrap. Ang tanan nga kredito alang sa konsepto ug pagpatuman moadto sa bukas nga gigikanan nga proyekto sa Pylon .

Taas ang ulo! Ang suporta alang sa gap utilities nga adunay flexbox bag-o lang gidugang sa Safari, busa ikonsiderar ang pag-verify sa imong gituyo nga suporta sa browser. Ang layout sa grid kinahanglan nga walay mga isyu. Basaha ang dugang pa .

Bertikal

Gamita .vstacksa paghimo og bertikal nga mga layout. Ang mga butang nga gitapok bug-os nga gilapdon pinaagi sa default. Gamita .gap-*ang mga utilities aron makadugang og luna tali sa mga butang.

Unang butang

Ikaduha nga butang

Ikatulo nga butang

html

<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>

Pahigda

Gigamit .hstackalang sa pinahigda nga mga layout. Ang mga na-stack nga mga butang gipatindog nga nakasentro pinaagi sa default ug gikuha ra ang ilang gikinahanglan nga gilapdon. Gamita .gap-*ang mga utilities aron makadugang og luna tali sa mga butang.

Unang butang

Ikaduha nga butang

Ikatulo nga butang

html

<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 sa pinahigda nga mga gamit sa margin sama .ms-autosa mga spacer:

Unang butang

Ikaduha nga butang

Ikatulo nga butang

html

<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>

Ug uban ang bertikal nga mga lagda :

Unang butang

Ikaduha nga butang

Ikatulo nga butang

html

<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 pananglitan

Gamita .vstacksa pag-stack sa mga buton ug uban pang mga elemento:

html

<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>

Paghimo og inline nga porma nga adunay .hstack:

html

<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;
}