使用自定义垂直规则帮助程序创建像元素一样的垂直分隔线。
运作方式
垂直规则的灵感来自该元素，允许您在常见布局中创建垂直分隔线。它们的样式与元素一样：<hr><hr>
- 它们很宽
1px - 他们有
min-height1em - 它们的颜色通过 和
currentColoropacity
根据需要使用其他样式自定义它们。
例
<div class="vr"></div>垂直规则在弹性布局中缩放其高度：
<div class="d-flex" style="height: 200px;">
<div class="vr"></div>
</div>带堆栈
它们也可以在堆栈中使用：
第一项
第二项
第三项
<div class="hstack gap-3">
<div class="p-2">First item</div>
<div class="p-2 ms-auto">Second item</div>
<div class="vr"></div>
<div class="p-2">Third item</div>
</div>CSS系统
Sass 变量
自定义垂直规则 Sass 变量以更改其宽度。
$vr-border-width: var(--#{$prefix}border-width);