Bootstrap 5 中无 vertical-rule 类，应使用 border-start 实现垂直分割线，它兼容 RTL、语义正确且样式可控，避免误用 hr 或硬编码 border-left。
Vertical-rule 在 Bootstrap 5 中根本不存在
Bootstrap 5 官方 CSS 类里没有 vertical-rule、vr 或任何叫 “vertical rule” 的内置组件。你搜到的可能是旧版文档残留、第三方插件，或是把 border-left / border-right 手动写成 “vertical rule” 的俗称。
用 border-left 实现垂直分割线最稳妥
这是最直接、兼容性最好、且完全可控的方式。适合分隔导航项、侧边栏与主内容、卡片内并排元素等场景。
- 推荐加在右侧元素上用
border-left，避免左侧元素外边距干扰布局流 - 宽度建议用
1px或0.0625rem（即 1px 在 16px 基准下），太粗会显得笨重 - 颜色别硬写
#dee2e6，优先复用 Bootstrap 的border-color变量，比如var(--bs-border-color) - 若用于响应式布局，记得在小屏下移除：用
border-left-sm-0这类断点类（需自定义或配合 Sass）
<div class="d-flex"> <div class="pe-3">左栏</div> <div class="ps-3 border-start border-secondary">右栏</div> </div>
border-start 是 Bootstrap 5 推荐的语义写法
它比 border-left 更健壮——在 RTL（如阿拉伯语）页面中会自动变成 border-right，避免手动切方向逻辑。
-
border-start对应border-left（LTR）或border-right（RTL） - 配套有
border-start-0、border-start-primary、border-start-opacity-25等变体 - 注意：它只作用于块级或 flex/grid 子项，对
inline元素无效 - 如果用了
border-start却没效果，大概率是父容器没设display: flex或display: grid，导致子项未进入格式化上下文
别用 hr 元素强行竖着放
<hr> 是语义化的水平分隔符，Bootstrap 的 hr 样式默认带 width: 100% 和 height: 0，强行旋转（transform: rotate(90deg)）会破坏文档流、触发重排、且无法对齐文字基线。
- 旋转后
hr的 margin 行为不可预测，尤其在 flex 容器中容易撑高父容器 - 无障碍支持差：
<hr>被读屏软件识别为“horizontal rule”，竖着用属于语义错配 - 真要动态控制方向，不如用伪元素
::before+border-left，语义干净、样式隔离
border-start 就不是可选项，而是必选项。另外，垂直线高度不匹配内容时，别急着调 height，先检查父容器是否设置了 align-items: flex-start 或存在 vertical-align 干扰。 
