Piles

Ajudants de taquigrafia que es basen a les nostres utilitats flexbox per fer que la disposició dels components sigui més ràpida i fàcil que mai.

En aquesta pàgina

Les piles ofereixen una drecera per aplicar una sèrie de propietats de flexbox per crear dissenys de manera ràpida i senzilla a Bootstrap. Tot el mèrit del concepte i la implementació va al projecte Pylon de codi obert .

Caps amunt! Recentment s'ha afegit a Safari el suport per a les utilitats gap amb flexbox, així que penseu a verificar la compatibilitat del vostre navegador previst. El disseny de la quadrícula no hauria de tenir problemes. Llegeix més .

Vertical

Utilitzeu .vstack-lo per crear dissenys verticals. Els elements apilats tenen una amplada completa per defecte. Utilitzeu .gap-*utilitats per afegir espai entre elements.

Primer element

Segon element

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

Horitzontal

Utilitzeu .hstack-lo per a dissenys horitzontals. Els elements apilats estan centrats verticalment per defecte i només ocupen l'amplada necessària. Utilitzeu .gap-*utilitats per afegir espai entre elements.

Primer element

Segon element

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

Utilitzant utilitats de marge horitzontal com .ms-autoa espaiadors:

Primer element

Segon element

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

I amb regles verticals :

Primer element

Segon element

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

Exemples

S'utilitza .vstackper apilar botons i altres elements:

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

Creeu un formulari en línia amb .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;
}