Added in v5.1 View on GitHub

垂直ルール Vertical rule

カスタムvertical ruleヘルパーを使用して、<hr>要素のような垂直方向の区切り線を作成します。

On this page

動作原理

vertical ruleは<hr>要素にインスパイアされており、一般的なレイアウトで垂直方向の区切り線を作成できます。これらは<hr>要素と同じようにスタイル化されています：

幅は1pxです
1emのmin-heightがあります
色はcurrentColorとopacityで設定されます

必要に応じて追加のスタイルでカスタマイズできます。

例

html

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

vertical ruleはflexレイアウトで高さをスケーリングします：

html

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

スタックと一緒に使用

stacksでも使用できます：

First item

Second item

Third item

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変数

vertical ruleのSass変数をカスタマイズして幅を変更します。

scss/_variables.scss

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