Added in v5.1 GitHubで見る

縦仕切り線

Vertical rule

カスタム縦仕切り線のヘルパーを使って、<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>

スタック

これらはスタックでも使えます。:

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>