Вертикальный разделитель
Используйте вспомогательную функцию настраиваемых вертикальных правил для создания вертикальных разделителей, таких как элемент <hr>
.
На этой странице
Как это устроено
Вертикальные правила основаны на элементе <hr>
, позволяющем создавать вертикальные разделители в общих макетах. Они стилизованы так же, как элементы <hr>
:
- Они имеют ширину
1px
- У них
min-height
равняется1em
- Их цвет устанавливается через
currentColor
иopacity
При необходимости настройте их дополнительными стилями.
Пример
<div class="vr"></div>
Вертикальные правила масштабируют свою высоту в гибких макетах:
<div class="d-flex" style="height: 200px;">
<div class="vr"></div>
</div>
Со стеками
Их также можно использовать в стеках:
First item
Second item
Third item
<div class="hstack gap-3">
<div class="bg-body-tertiary border">First item</div>
<div class="bg-body-tertiary border ms-auto">Second item</div>
<div class="vr"></div>
<div class="bg-body-tertiary border">Third item</div>
</div>