Вертикальное правило

Используйте помощник пользовательского вертикального правила для создания вертикальных разделителей, таких как <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>