Вертыкальнае правіла

Выкарыстоўвайце дапаможнік карыстальніцкіх вертыкальных правілаў, каб стварыць вертыкальныя падзельнікі, такія як <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>

Са стэкамі

Іх таксама можна выкарыстоўваць у стосах :

Першы пункт

Другі пункт

Пункт трэці

<div class="hstack gap-3">
  <div class="bg-light border">First item</div>
  <div class="bg-light border ms-auto">Second item</div>
  <div class="vr"></div>
  <div class="bg-light border">Third item</div>
</div>