Salta al contenuto principale Passa alla navigazione dei documenti
Check
in English

Regola verticale

Usa l'helper per la regola verticale personalizzata per creare divisori verticali come l' <hr>elemento.

Su questa pagina

Come funziona

Le regole verticali si ispirano <hr>all'elemento, consentendo di creare divisori verticali in layout comuni. Hanno uno stile proprio come <hr>gli elementi:

  • Sono 1pxlarghi
  • Hanno min-heightdi1em
  • Il loro colore è impostato tramite currentColoreopacity

Personalizzali con stili aggiuntivi secondo necessità.

Esempio

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

Le regole verticali scalano la loro altezza nei layout flessibili:

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

Con pile

Possono essere utilizzati anche in pile :

Primo elemento
Secondo elemento
Terzo elemento
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>