Chuyển đến nội dung chính Chuyển đến điều hướng tài liệu
in English

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

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-height1em
  • Màu của chúng được thiết lập thông qua currentColoropacity

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 :

Mục đầu tiên
Mặt hàng thứ hai
Mặt hàng thứ ba
<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>