Cмотреть на GitHub

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

Используйте вспомогательную функцию настраиваемых вертикальных правил для создания вертикальных разделителей, таких как элемент <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="p-2">Первый элемент</div>
  <div class="p-2 ms-auto">Второй элемент</div>
  <div class="vr"></div>
  <div class="p-2">Третий элемент</div>
</div>

CSS

Sass переменные

Customize the vertical rule Sass variable to change its width.

scss/_variables.scss

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