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.

Sa pahinang ito

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 .

Heads up! Ang suporta para sa gap utilities na may flexbox ay idinagdag kamakailan sa Safari, kaya isaalang-alang ang pag-verify ng iyong nilalayon na suporta sa browser. Ang layout ng grid ay dapat na walang mga isyu. Magbasa pa .

Patayo

Gamitin .vstackupang 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.

Unang item

Pangalawang item

Pangatlong 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 .hstackpara 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.

Unang item

Pangalawang item

Pangatlong 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-autong mga spacer:

Unang item

Pangalawang item

Pangatlong item

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

Unang item

Pangalawang item

Pangatlong item

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