在GitHub上访问

Vertical rule垂直线

使用自定义垂直规则帮助器创建垂直分隔符，如

元素。

本页导航↓

工作原理

垂直线的灵感来自<hr>元素，允许您在常用布局中创建垂直分隔符。它们的样式就像<hr>元素：

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

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

例子

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

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

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