Przejdź do głównej zawartości Przejdź do nawigacji w dokumentach
in English

Reguła pionowa

Użyj niestandardowego pomocnika linijek pionowych, aby utworzyć pionowe dzielniki, takie jak <hr>element.

Jak to działa

Pionowe zasady są inspirowane <hr>elementem, co pozwala na tworzenie pionowych przegród w typowych układach. Są stylizowane tak jak <hr>elementy:

  • 1pxszerokie
  • Mają min-heightz1em
  • Ich kolor jest ustalany za pomocą currentColoriopacity

W razie potrzeby dostosuj je za pomocą dodatkowych stylów.

Przykład

<div class="vr"></div>

Linie pionowe skalują swoją wysokość w układach flex:

<div class="d-flex" style="height: 200px;">
  <div class="vr"></div>
</div>

Ze stosami

Mogą być również używane w stosach :

Pierwsza pozycja
Druga pozycja
Trzecia pozycja
<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>