縦罫線

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

このページでは

使い方

垂直方向のルールは<hr>要素に着想を得ており、一般的なレイアウトで垂直方向の仕切りを作成できます。<hr>それらは要素と同じようにスタイルされています:

彼らは1px広いです
彼らはmin-heightの1em
それらの色はとで設定されcurrentColorますopacity

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

例

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

垂直方向のルールは、フレックスレイアウトで高さをスケーリングします。

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

スタックあり

それらはスタックでも使用できます。

最初のアイテム

2 番目のアイテム

3 番目の項目

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