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>

スタックを使用

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

最初の項目

2番目の項目

3番目の項目

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