垂直分割线

使用自定义垂直规则辅助工具类来创建类似 <hr> 元素的垂直分隔线。

本页目录

它是如何工作的

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

Sass 变量

自定义垂直线的 Sass 变量以更改其宽度。

scss/_variables.scss

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