垂直分隔線（Vertical rule）

運作原理（How it works）

垂直分隔線的靈感來自 <hr> 元素，讓您可以在常見的版面配置中建立垂直分隔線。它們的樣式就像 <hr> 元素一樣：

• 它們的寬度為 1px
• 它們的 min-height 為 1em
• 它們的顏色透過 currentColor 和 opacity 設定

根據需要使用額外的樣式進行自訂。

範例（Example）

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

垂直分隔線在 Flex 版面配置中會縮放其高度：

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

與堆疊搭配使用（With stacks）

它們也可以在堆疊中使用：

<div class="hstack gap-3">
  <div class="p-2">First item</div>
  <div class="p-2 ms-auto">Second item</div>
  <div class="vr"></div>
  <div class="p-2">Third item</div>
</div>

CSS

Sass 變數（Sass variables）

自訂垂直分隔線的 Sass 變數以變更其寬度。

$vr-border-width:             var(--#{$prefix}border-width);