Ir para o conteúdo principal Pular para a navegação de documentos
Check
in English

Regra vertical

Use o auxiliar de regra vertical personalizado para criar divisores verticais como o <hr>elemento.

Nesta página

Como funciona

As regras verticais são inspiradas no <hr>elemento, permitindo criar divisores verticais em layouts comuns. Eles são estilizados como <hr>elementos:

  • Eles são 1pxlargos
  • Eles têm min-heightde1em
  • Sua cor é definida via currentColoreopacity

Personalize-os com estilos adicionais conforme necessário.

Exemplo

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

As regras verticais dimensionam sua altura em layouts flexíveis:

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

Com pilhas

Eles também podem ser usados ​​em pilhas :

Primeiro item
Segundo item
Terceiro item
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>