垂直标尺

怎么运行的

¥How it works

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

¥Vertical rules are inspired by the <hr> element, allowing you to create vertical dividers in common layouts. They’re styled just like <hr> elements:

• 宽度为 1px

  ¥They’re 1px wide

• 他们有 min-height 共 1em 个

  ¥They have min-height of 1em

• 它们的颜色通过 currentColor 和 opacity 设置

  ¥Their color is set via currentColor and opacity

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

¥Customize them with additional styles as needed.

示例

¥Example

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

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

¥Vertical rules scale their height in flex layouts:

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

带堆栈

¥With stacks

它们也可以在 stacks 中使用：

¥They can also be used in stacks:

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

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

¥Customize the vertical rule Sass variable to change its width.

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