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