Quy tắc dọc

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ụ

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

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

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