Вертикальный разделитель

Как это устроено

Вертикальные правила основаны на элементе <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="p-2">Первый элемент</div><divclass="p-2 ms-auto">Второй элемент</div><divclass="vr"></div><divclass="p-2">Третий элемент</div></div>

CSS

Sass переменные

Customize the vertical rule Sass variable to change its width.

$vr-border-width:var(--#{$prefix}border-width);