Vertikálne pravidlo

Pomocou vlastného pomocníka zvislého pravidla vytvorte zvislé oddeľovače ako <hr>prvok.

Na tejto stránke

Ako to funguje

Vertikálne pravidlá sú inšpirované <hr>prvkom, čo vám umožňuje vytvárať zvislé oddeľovače v bežných rozloženiach. Sú štylizované rovnako ako <hr>prvky:

Sú 1pxširoké
Majú min-heightz1em
Ich farba sa nastavuje pomocou currentColoraopacity

Prispôsobte si ich podľa potreby ďalšími štýlmi.

Príklad

html

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

Vertikálne pravidlá menia svoju výšku vo flexibilných rozloženiach:

html

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

So zásobníkmi

Môžu byť tiež použité v stohoch :

Prvá položka

Druhá položka

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