メインコンテンツにスキップ ドキュメント ナビゲーションにスキップ
Check
in English

縦罫線

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

このページでは

使い方

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

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

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

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

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

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

スタックあり

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

最初のアイテム
2 番目のアイテム
3 番目の項目
html
<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>