跳到主要內容 跳到文檔導航
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>