垂直分割线 · Bootstrap 6.0 中文文档

它是如何工作的

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

带堆栈

它们也可以用于堆栈：

第一项

第二项

第三项

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

垂直规则使用带有回退的 CSS 变量来设置默认的边框宽度。开箱即用时，--vr-border-width 未分配，这意味着它默认使用 --border-width 的值。