regla vertical

Utilice el asistente de regla vertical personalizado para crear divisores verticales como el <hr>elemento.

En esta página

Cómo funciona

Las reglas verticales están inspiradas en el <hr>elemento, lo que le permite crear divisores verticales en diseños comunes. Están diseñados como <hr>elementos:

son 1pxanchos
tienen min-heightde1em
Su color se establece a través de currentColoryopacity

Personalícelos con estilos adicionales según sea necesario.

Ejemplo

html

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

Las reglas verticales escalan su altura en diseños flexibles:

html

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

con pilas

También se pueden utilizar en pilas :

Primer elemento

segundo artículo

tercer artículo

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>