Vertikal regel

Använd den anpassade vertikala regelhjälpen för att skapa vertikala avdelare som <hr>elementet.

På den här sidan

Hur det fungerar

Vertikala regler är inspirerade av <hr>elementet, vilket gör att du kan skapa vertikala avdelare i vanliga layouter. De är utformade precis som <hr>element:

De är 1pxbreda
De har min-heightav1em
Deras färg ställs in via currentColorochopacity

Anpassa dem med ytterligare stilar efter behov.

Exempel

html

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

Vertikala regler skalar sin höjd i flexlayouter:

html

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

Med travar

De kan också användas i staplar :

Första objektet

Andra punkten

Tredje objektet

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>