Vertikale Regel

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

Auf dieser Seite

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

html

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

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

html

<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

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>