세로줄

사용자 지정 세로 눈금 도우미를 사용하여 <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>

스택 포함

스택 에서도 사용할 수 있습니다 .

첫 번째 항목

두 번째 항목

세 번째 항목

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>