Вертикальная линия

Используйте пользовательский помощник вертикальной линии для создания вертикальных разделителей, как элемент <hr>.

На этой странице

Как это работает

Вертикальные линии вдохновлены элементом <hr>, позволяя создавать вертикальные разделители в обычных макетах. Они стилизованы точно так же, как элементы <hr>:

Они шириной 1px
Они имеют min-height равную 1em
Их цвет устанавливается через currentColor и opacity

Настраивайте их с помощью дополнительных стилей по мере необходимости.

Пример

html

<div class="vr"></div>

Вертикальные линии масштабируют свою высоту в flex-макетах:

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 переменные

Настройте переменную Sass вертикальной линии, чтобы изменить ее ширину.

scss/_variables.scss

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