View on GitHub

Vertical rule

使用自定義 vertical rule 工具來創建垂直分隔線，像是 <hr> 元素。

六角學院的 Bootstrap 5 課程上線囉，立即與萬人一同學習最專業、最深入的 Bootstrap 5 課程。

立即上課去

On this page

如何運作

Vertical rule 的靈感來自 <hr> 元素，允許你在常見排版中創建垂直分隔線。他們的樣式就像 <hr> 元素：

1px 寬
min-height 為 1em
顏色是透過 currentColor 和 opacity 設定的

根據需要使用其他樣是自定義。

範例

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

Vertical rules 在 flex 佈局中縮放他們的高度：

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

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