Quy tắc dọc

Sử dụng trình trợ giúp quy tắc dọc tùy chỉnh để tạo các dải phân cách dọc như <hr>phần tử.

Trên trang này

Làm thế nào nó hoạt động

Các quy tắc dọc được lấy cảm hứng từ <hr>phần tử, cho phép bạn tạo các dải phân cách dọc trong các bố cục phổ biến. Chúng được tạo kiểu giống như <hr>các phần tử:

Chúng 1pxrộng
Họ min-heightcó1em
Màu của chúng được thiết lập thông qua currentColorvàopacity

Tùy chỉnh chúng với các kiểu bổ sung khi cần thiết.

Thí dụ

html

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

Các quy tắc dọc chia tỷ lệ chiều cao của chúng trong bố cục flex:

html

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

Với ngăn xếp

Chúng cũng có thể được sử dụng trong các ngăn xếp :

Mục đầu tiên

Mặt hàng thứ hai

Mặt hàng thứ ba

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>