Added in v5.1 View on GitHub

Vertical rule

使用自定义垂直规则辅助对象创建垂直分隔符，如<hr>元素。

On this page

工作原理

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

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

根据需要使用其他样式进行自定义。

实例

html

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

Vertical rules在 flex 布局中缩放其高度：

html

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

和Stack一起使用

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

CSS

Sass变量

自定义vertical rule 的 Sass变量以更改其宽度。

scss/_variables.scss

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