Added in v5.1 View on GitHub

垂直规则（Vertical rule）

使用自定义垂直规则助手创建垂直分隔线，如 <hr> 元素。

On this page

工作原理

垂直规则受 <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>

堆栈

它们还可用于 stacks:

First item

Second item

Third item

html

<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 变量，改变其宽度。

scss/_variables.scss

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