Added in v5.1 在 GitHub 上查看

垂直线

使用自定义垂直规则帮助程序创建垂直分隔线，如 ‘

’ 元素。

当前页

工作原理

垂直线的灵感来自 <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>

带堆栈

它们也可以在 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>