跳到主要内容 跳到文档导航
Check
in English

垂直尺

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

在本页面

这个怎么运作

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

  • 它们很1px
  • 他们min-height1em
  • 它们的颜色通过currentColor和设置opacity

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

例子

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

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

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

带栈

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

第一项
第二项
第三项
html
<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>