Krūvos

Greitosios pagalbinės priemonės, kurios remiasi mūsų „flexbox“ įrankiu, kad komponentų išdėstymas būtų greitesnis ir lengvesnis nei bet kada anksčiau.

Šiame puslapyje

Stacks siūlo spartųjį klavišą, leidžiantį pritaikyti daugybę „flexbox“ ypatybių, kad būtų galima greitai ir lengvai sukurti išdėstymus „Bootstrap“. Visi nuopelnai už koncepciją ir įgyvendinimą tenka atvirojo kodo Pylon projektui .

Galvas aukštyn! Neseniai į „Safari“ buvo įtrauktas spragų paslaugų su „flexbox“ palaikymas, todėl apsvarstykite galimybę patikrinti numatomą naršyklės palaikymą. Tinklelio išdėstymas neturėtų turėti problemų. Skaityti daugiau .

Vertikalus

Naudokite .vstackvertikaliems maketams kurti. Pagal numatytuosius nustatymus sukrauti elementai yra viso pločio. Naudokite .gap-*komunalines paslaugas, kad padidintumėte tarpą tarp elementų.

Pirmas daiktas

Antras elementas

Trečias daiktas

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

Horizontaliai

Naudokite .hstackhorizontaliam išdėstymui. Pagal numatytuosius nustatymus sukrauti elementai yra vertikaliai centre ir užima tik reikiamą plotį. Naudokite .gap-*komunalines paslaugas, kad padidintumėte tarpą tarp elementų.

Pirmas daiktas

Antras elementas

Trečias daiktas

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

Naudojant horizontalias paraštes, pvz .ms-auto., kaip tarpiklius:

Pirmas daiktas

Antras elementas

Trečias daiktas

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

Ir pagal vertikalias taisykles :

Pirmas daiktas

Antras elementas

Trečias daiktas

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

Pavyzdžiai

Naudokite .vstackmygtukams ir kitiems elementams sukrauti:

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

Sukurkite tiesioginę formą naudodami .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;
}