Zum Hauptinhalt springen Zur Dokumentennavigation springen
in English

Vertikale Regel

Verwenden Sie den benutzerdefinierten Helfer für vertikale Linien, um vertikale Trennlinien wie das <hr>Element zu erstellen.

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 :

Erster Gegenstand
Zweiter Artikel
Dritter Artikel
<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>