v5.1 中添加在 GitHub 上查看

垂直规则

使用自定义垂直规则帮助程序创建垂直分隔符，如 <hr> 元素。

此页面上

工作原理

垂直规则受 <hr> 元素启发，允许你在常见布局中创建垂直分隔符。它们与 <hr> 元素的样式相同

它们宽 1px
它们的 min-height 为 1em
它们的 color 通过 currentColor 和 opacity 设置

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

示例

html

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

垂直规则在 flex 布局中缩放其高度

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