v5.1 新增在 GitHub 上檢視

垂直規則

使用自訂垂直規則輔助程式來建立垂直分隔線，就像 <hr> 元素一樣。

在此頁面

運作方式

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

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

視需要使用其他樣式自訂它們。

範例

html

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

垂直規則在彈性配置中調整其高度

html

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

使用堆疊

它們也可以用於堆疊

第一個項目

第二個項目

第三個項目

html

<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 變數以變更其寬度。

scss/_variables.scss

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