Dagiti bunton

Dagiti katulongan ti shorthand a mangbangon iti rabaw dagiti flexbox utilities-tayo tapno naparpartak ken nalaklaka ti layout ti paset ngem idi.

Iti daytoy a panid

Dagiti stack ket mangitukon ti ab-ababa a dalan para iti panangipakat ti bilang dagiti tagikua ti flexbox tapno napardas ken nalaka a mangpartuat kadagiti layout iti Bootstrap. Amin a kredito para iti konsepto ken pannakaipatungpal ket mapan iti proyekto ti open source a Pylon .

Ulo nga agpangato! Ti suporta para kadagiti gap utilities nga addaan iti flexbox ket nabiit pay a nainayon iti Safari, isu nga ibilangmo ti panangpaneknek ti nairanta a suporta ti browsermo. Awan koma ti isyu ti grid layout. Basaen ti ad-adu pay .

Patakder

Usaren .vstacka mangpartuat kadagiti bertikal a layout. Dagiti naurnong a banag ket naan-anay a kalawa babaen ti default. Usaren .gap-*dagiti utilidad tapno mangnayon iti espasio iti nagbaetan dagiti banag.

Umuna nga aytem

Maikadua a banag

Maikatlo nga aytem

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

Paidda

Usaren .hstackpara kadagiti horizontal a layout. Dagiti naurnong a banag ket bertikal a naisentro babaen ti default ken mangala laeng ti kasapulan a kalawada. Usaren .gap-*dagiti utilidad tapno mangnayon iti espasio iti nagbaetan dagiti banag.

Umuna nga aytem

Maikadua a banag

Maikatlo nga aytem

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

Babaen ti panagusar kadagiti horisontal a margin a utilidad a kas .ms-autodagiti espasador:

Umuna nga aytem

Maikadua a banag

Maikatlo nga aytem

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

Ket addaan kadagiti bertikal a pagannurotan :

Umuna nga aytem

Maikadua a banag

Maikatlo nga aytem

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

Dagiti pagarigan

Usaren .vstacka mangitumpok kadagiti buton ken dadduma pay nga 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>

Mangaramid ti inline a porma nga addaan iti .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 nga

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