Преминете към основното съдържание Преминете към навигацията с документи
Check
in English

Вертикално правило

Използвайте персонализирания помощник за вертикално правило, за да създадете вертикални разделители като <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="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>