Vertikaalne reegel

Kasutage kohandatud vertikaalse reegli abilist, et luua vertikaalsed jaoturid, nagu <hr>element.

Sellel lehel

Kuidas see töötab

Vertikaalsed reeglid on inspireeritud <hr>elemendist, mis võimaldab teil luua tavalistes paigutustes vertikaalseid jagajaid. Need on kujundatud nagu <hr>elemendid:

Need on 1pxlaiad
Neil min-heighton1em
Nende värv määratakse currentColorja kauduopacity

Kohandage neid vastavalt vajadusele täiendavate stiilidega.

Näide

html

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

Vertikaalsed reeglid skaleerivad nende kõrgust painduvates paigutustes:

html

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

Virnadega

Neid saab kasutada ka virnadena :

Esimene ese

Teine ese

Kolmas ese

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>