Reguła pionowa

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

Na tej stronie

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:

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

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

Przykład

html

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

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

html

<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

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>