Stacks

Shorthand-Helfer déi uewen op eise Flexbox Utilities bauen fir de Layout vun de Komponenten méi séier a méi einfach ze maachen wéi jee.

Op dëser Säit

Stacks bidden eng Ofkiirzung fir eng Zuel vu Flexbox Eegeschaften z'applizéieren fir séier an einfach Layouten am Bootstrap ze kreéieren. All Kreditt fir d'Konzept an d'Ëmsetzung geet un den Open Source Pylon Projet .

Kapp erop! Ënnerstëtzung fir Spalt Utilities mat Flexbox gouf viru kuerzem zu Safari bäigefüügt, also betruecht Är virgesinn Browser-Ënnerstëtzung z'iwwerpréiwen. Gitter Layout soll keng Problemer hunn. Liest méi .

Vertikal

Benotzt .vstackfir vertikal Layouten ze kreéieren. Gestapelt Elementer si voll Breet par défaut. Benotzt .gap-*Utilities fir Plaz tëscht Elementer ze addéieren.

Éischt Element

Zweet Element

Drëtten Element

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>

Horizontal

Benotzt .hstackfir horizontal Layouten. Gestapelt Elementer sinn standardiséiert vertikal zentréiert an huelen nëmmen hir néideg Breet op. Benotzt .gap-*Utilities fir Plaz tëscht Elementer ze addéieren.

Éischt Element

Zweet Element

Drëtten Element

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>

Benotzt horizontal Margin Utilities wéi .ms-autoals Spacer:

Éischt Element

Zweet Element

Drëtten Element

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>

A mat vertikale Regelen :

Éischt Element

Zweet Element

Drëtten Element

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>

Beispiller

Benotzt .vstackfir Knäppercher an aner Elementer ze stackelen:

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>

Erstellt en Inline Form mat .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;
}