Stabler

Stenografihjelpere som bygger på toppen av flexbox-verktøyene våre for å gjøre komponentoppsettet raskere og enklere enn noen gang.

På denne siden

Stacks tilbyr en snarvei for å bruke en rekke flexbox-egenskaper for raskt og enkelt å lage oppsett i Bootstrap. All ære for konseptet og implementeringen går til åpen kildekode Pylon-prosjektet .

Vær oppmerksom! Støtte for gap-verktøy med flexbox ble nylig lagt til Safari, så vurder å bekrefte den tiltenkte nettleserstøtten. Rutenettoppsett skal ikke ha noen problemer. Les mer .

Vertikal

Bruk .vstacktil å lage vertikale oppsett. Stablede elementer er som standard i full bredde. Bruk .gap-*verktøy for å legge til mellomrom mellom elementer.

Første element

Andre element

Tredje element

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

Horisontal

Brukes .hstacktil horisontale oppsett. Stablede elementer er vertikalt sentrert som standard og tar bare opp den nødvendige bredden. Bruk .gap-*verktøy for å legge til mellomrom mellom elementer.

Første element

Andre element

Tredje element

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

Bruk av horisontale marginverktøy .ms-autosom avstandsstykker:

Første element

Andre element

Tredje element

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

Og med vertikale regler :

Første element

Andre element

Tredje element

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

Eksempler

Brukes .vstacktil å stable knapper og andre elementer:

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

Lag et innebygd skjema med .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;
}