Lodret regel

Brug den tilpassede lodrette regelhjælper til at oprette lodrette skillelinjer som <hr>elementet.

På denne side

Hvordan det virker

Lodrette regler er inspireret af <hr>elementet, så du kan oprette lodrette skillelinjer i almindelige layouts. De er stylet ligesom <hr>elementer:

De er 1pxbrede
De har min-heightaf1em
Deres farve indstilles via currentColorogopacity

Tilpas dem med yderligere stilarter efter behov.

Eksempel

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

Lodrette regler skalerer deres højde i flex-layouts:

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

Med stakke

De kan også bruges i stakke :

Første vare

Andet punkt

Tredje punkt

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