添加于 v5.1 在GitHub查看

垂直规则

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

在此页

怎么运行的

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

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

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

例子

网页格式

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

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

网页格式

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

带堆栈

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

第一项

第二项

第三项

网页格式

<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>