Półki na książki

Skróty pomocników, które opierają się na naszych narzędziach flexbox, aby układ komponentów był szybszy i łatwiejszy niż kiedykolwiek.

Na tej stronie

Stosy oferują skrót do stosowania wielu właściwości flexbox, aby szybko i łatwo tworzyć układy w Bootstrap. Cała zasługa za koncepcję i wdrożenie należy do projektu Pylon o otwartym kodzie źródłowym .

Heads-up! Wsparcie dla narzędzi gap z flexbox zostało niedawno dodane do Safari, więc rozważ zweryfikowanie obsługi przez Ciebie przeglądarki. Układ siatki nie powinien mieć żadnych problemów. Czytaj więcej .

Pionowy

Służy .vstackdo tworzenia układów pionowych. Ułożone elementy mają domyślnie pełną szerokość. Użyj .gap-*narzędzi, aby dodać przestrzeń między elementami.

Pierwsza pozycja

Druga pozycja

Trzecia pozycja

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>

Poziomy

Używaj .hstackdo układów poziomych. Elementy ułożone w stos są domyślnie wyśrodkowane w pionie i zajmują tylko niezbędną szerokość. Użyj .gap-*narzędzi, aby dodać przestrzeń między elementami.

Pierwsza pozycja

Druga pozycja

Trzecia pozycja

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>

Korzystanie z narzędzi marginesów poziomych, takich .ms-autojak przekładki:

Pierwsza pozycja

Druga pozycja

Trzecia pozycja

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>

Oraz z pionowymi regułami :

Pierwsza pozycja

Druga pozycja

Trzecia pozycja

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>

Przykłady

Użyj .vstackdo układania przycisków i innych elementów:

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>

Utwórz formularz wbudowany za pomocą .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;
}