in English

Virnad

Kiirkirjaabilised, mis põhinevad meie flexboxi utiliitidel, et muuta komponentide paigutus kiiremaks ja lihtsamaks kui kunagi varem.

Sellel lehel

Stacks pakub otseteed mitmete flexboxi atribuutide rakendamiseks, et kiiresti ja hõlpsalt Bootstrapis paigutusi luua. Kogu tunnustus kontseptsiooni ja teostuse eest kuulub avatud lähtekoodiga Pyloni projektile .

Pea püsti! Safarisse lisati hiljuti flexboxiga lünkutiliitide tugi, seega kaaluge oma kavandatud brauseri toe kontrollimist. Võrgustiku paigutusega ei tohiks probleeme olla. Loe edasi .

Vertikaalne

Kasutage .vstackvertikaalsete paigutuste loomiseks. Virnastatud üksused on vaikimisi täislaiuses. Kasutage .gap-*utiliite, et lisada üksuste vahele ruumi.

Esimene ese

Teine ese

Kolmas ese

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

Horisontaalne

Kasutage .hstackhorisontaalsete paigutuste jaoks. Virnastatud üksused on vaikimisi vertikaalselt tsentreeritud ja võtavad ainult vajaliku laiuse. Kasutage .gap-*utiliite, et lisada üksuste vahele ruumi.

Esimene ese

Teine ese

Kolmas ese

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

Horisontaalse veerise utiliitide kasutamine .ms-auto, näiteks vahetükkidena:

Esimene ese

Teine ese

Kolmas ese

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

Ja vertikaalsete reeglitega :

Esimene ese

Teine ese

Kolmas ese

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

Näited

Kasutage .vstacknuppude ja muude elementide virnastamiseks:

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

Looge tekstisisene vorm .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;
}