垂直标尺

使用自定义垂直标尺助手创建垂直分隔线，效果类似 <hr> 元素。

工作原理

垂直标尺受到 <hr> 元素的启发，允许您在常见布局中创建垂直分隔线。它们的样式就像 <hr> 元素一样：

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

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

示例

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

垂直标尺在 flex 布局中自动缩放它们的高度：

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

和堆栈一起使用

它们也可以用在 stacks 中使用：

First item

Second item

Third item

<div class="hstack gap-3">
  <div class="bg-light border">First item</div>
  <div class="bg-light border ms-auto">Second item</div>
  <div class="vr"></div>
  <div class="bg-light border">Third item</div>
</div>