Stacks

Īsraksta palīgi, kas balstās uz mūsu flexbox utilītprogrammām, lai padarītu komponentu izkārtojumu ātrāku un vienkāršāku nekā jebkad agrāk.

Šajā lapā

Stacks piedāvā īsceļu vairāku flexbox rekvizītu lietošanai, lai ātri un viegli izveidotu izkārtojumus programmā Bootstrap. Viss nopelns par koncepciju un ieviešanu attiecas uz atvērtā koda Pylon projektu .

Uzmanību! Safari nesen tika pievienots atbalsts utilītprogrammām ar flexbox, tāpēc apsveriet iespēju pārbaudīt paredzēto pārlūkprogrammas atbalstu. Režģa izkārtojumam nevajadzētu būt problēmām. Lasīt vairāk .

Vertikāli

Izmantojiet .vstack, lai izveidotu vertikālus izkārtojumus. Sakrautie vienumi pēc noklusējuma ir pilnā platumā. Izmantojiet .gap-*utilītas, lai starp vienumiem pievienotu atstarpi.

Pirmā prece

Otrais vienums

Trešais postenis

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>

Horizontāli

Izmantojiet .hstackhorizontālajiem izkārtojumiem. Sakrautie vienumi pēc noklusējuma ir centrēti vertikāli un aizņem tikai nepieciešamo platumu. Izmantojiet .gap-*utilītas, lai starp vienumiem pievienotu atstarpi.

Pirmā prece

Otrais vienums

Trešais postenis

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>

Izmantojot horizontālās piemales utilītas, piemēram .ms-auto, kā starplikas:

Pirmā prece

Otrais vienums

Trešais postenis

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>

Un ar vertikāliem noteikumiem :

Pirmā prece

Otrais vienums

Trešais postenis

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>

Piemēri

Izmantojiet .vstack, lai sakrautu pogas un citus elementus:

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>

Izveidojiet iekļautu veidlapu ar .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;
}