Κάθετος κανόνας

Χρησιμοποιήστε το βοηθητικό προσαρμοσμένο κάθετο κανόνα για να δημιουργήσετε κατακόρυφα διαχωριστικά όπως το <hr>στοιχείο.

Σε αυτήν την σελίδα

Πως δουλεύει

Οι κάθετοι κανόνες είναι εμπνευσμένοι από το <hr>στοιχείο, επιτρέποντάς σας να δημιουργήσετε κάθετα διαχωριστικά σε κοινές διατάξεις. Έχουν στυλ όπως ακριβώς τα <hr>στοιχεία:

Είναι 1pxφαρδιά
Έχουν min-heightαπό1em
Το χρώμα τους ρυθμίζεται μέσω currentColorκαιopacity

Προσαρμόστε τα με πρόσθετα στυλ όπως απαιτείται.

Παράδειγμα

html

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

Οι κάθετοι κανόνες κλιμακώνουν το ύψος τους σε ευέλικτες διατάξεις:

html

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

Με στοίβες

Μπορούν επίσης να χρησιμοποιηθούν σε στοίβες :

Πρώτο στοιχείο

Δεύτερο στοιχείο

Τρίτο στοιχείο

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>