Vertikale Regel

Wie es funktioniert

Vertikale Linien sind vom <hr>Element inspiriert, sodass Sie vertikale Trennlinien in gängigen Layouts erstellen können. Sie sind wie <hr>Elemente gestaltet:

• Sie sind 1pxbreit
• Sie haben min-heightvon1em
• Ihre Farbe wird über currentColorund eingestelltopacity

Passen Sie sie nach Bedarf mit zusätzlichen Stilen an.

Beispiel

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

Vertikale Linien skalieren ihre Höhe in Flex-Layouts:

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

Mit Stapeln

Sie können auch in Stapeln verwendet werden :

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