添加于 v5.1 在 GitHub 上查看

垂直分隔线

使用自定义垂直分隔线助手来创建像<hr>元素一样的垂直分隔线。

在此页

怎么运行的

垂直分隔的灵感来自<hr>元素，允许您在常见布局中创建垂直分隔线。它们的样式就像<hr>元素一样：

他们有1px宽
他们有1em的min-height
它们的颜色通过currentColor和opacity设置

根据需要使用其他样式自定义它们。

例子

HTML

<div class="vr"></div>

垂直规则在弹性布局中缩放它们的高度：

HTML

<div class="d-flex" style="height: 200px;">
  <div class="vr"></div>
</div>

带堆叠

它们也可以在堆叠中使用：

First item

Second item

Third item

HTML

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