垂直法则

使用自定义垂直规则助手创建垂直分隔线,如 <hr> 元素。

怎么运行的

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

  • 它们有 1px
  • 他们的 min-height1em
  • 它们的颜色是通过 currentColoropacity 设置的
  • 根据需要使用其他样式自定义它们。
例子
<div class="vr"></div>

垂直规则在 flex 布局中缩放它们的高度:

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

它们也可以在堆栈中使用:

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>