垂直标尺

怎么运行的

🌐 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
• 他们有 min-height 的 1em
• 它们的颜色是通过 currentColor 和 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

它们也可以用于堆栈：

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