Vertikální pravidlo

Pomocí vlastního pomocníka svislého pravidla vytvořte svislé oddělovače, jako je <hr>prvek.

Na této straně

Jak to funguje

Vertikální pravidla jsou inspirována <hr>prvkem, což umožňuje vytvářet vertikální oddělovače v běžných rozvrženích. Jsou stylizované stejně jako <hr>prvky:

Jsou 1pxširoké
Mají min-heightz1em
Jejich barva se nastavuje pomocí currentColoraopacity

Podle potřeby je upravte pomocí dalších stylů.

Příklad

html

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

Vertikální pravidla mění svou výšku ve flexibilních rozvrženích:

html

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

Se stohy

Mohou být také použity v hromadách :

První položka

Druhá položka

Třetí položka

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>