Bootstrap 5 中无 vertical-rule 类，垂直分割线需用 border-start（推荐）、.vr 工具类（仅限 flex/inline 子项）或伪元素实现，须注意格式化上下文、响应式断点、RTL 适配及父容器定位。
Bootstrap 5 没有 vertical-rule 类，也不存在叫 “vr” 的全局垂直分割线组件——所谓“容器间分隔条”，本质是控制单侧边框或伪元素定位，关键在语义适配、响应式收放和父容器格式化上下文是否就位。
用 border-start 给右侧容器加竖线（推荐）
这是 Bootstrap 官方推荐的 RTL 友好写法，比 border-left 更健壮，自动在阿拉伯语等右向左页面中转为 border-right。
- 必须确保父容器设了
display: flex或display: grid，否则子元素不进入格式化上下文，border-start不生效 - 加在右侧容器上更稳妥：左侧容器若有
margin-right或padding-right，容易干扰布局流 - 颜色优先用变量：
border-start+border-start-secondary，避免硬写#dee2e6 - 宽度建议
1px或0.0625rem；太粗会破坏视觉节奏
<div class="d-flex"> <div class="pe-3">内容 A</div> <div class="ps-3 border-start border-secondary">内容 B</div> </div>
用 .vr 工具类只适用于 flex 子项（非 col）
.vr 是 Bootstrap 5.2+ 新增的工具类，但它不是万能的——它只对 inline 或 flex 子项有效，直接加在 col 上完全没反应。
-
.vr内置高度固定为1rem，且依赖height: 1rem+border-right实现，无法撑满父容器高度 - 典型可用场景：A B
- 若项目仍在用 Bootstrap 5.1 或更低版本，
.vr类根本不存在，别白费时间查文档 - 别试图给
.vr加height: 100%——它的父容器若没设高度或未触发 BFC，依然无效
响应式下竖线消失？检查断点类和 gutter 干扰
竖线在小屏变两行后错位、压住文字、或干脆消失，大概率不是代码写错了，而是没处理好响应式断点与栅格 gutter 的叠加效应。
- 用
border-start-sm-0移除小屏竖线（需确认项目已启用 Sass 编译或自定义了断点类） - 如果用了
gutter（如gx-3），竖线位置会受 padding 影响，此时改用ps-3/pe-3配合border-start更可控 - 竖线高度不匹配内容？先看父容器是否设了
align-items: flex-start——这会让子项顶部对齐，竖线自然被截短 - 别靠
transform: scaleY()拉伸.vr，它会模糊、触发重排，且无障碍支持差
伪元素 ::after 实现自定义竖线（需手动定位）
当需要控制长度、偏移、阴影或动画时，伪元素比纯边框更灵活，但绝大多数人栽在 position 上。
- 父容器必须设
position: relative，否则::after会相对于 viewport 定位 - 竖线高度用
top: 0.5rem; bottom: 0.5rem比height: 100%更可靠，避开内边距区域 - 若列高不一致，
bottom: 0.5rem可能导致底部截断；此时应配合min-height或 flex 容器的align-items: stretch - 别漏掉
content: ""——没有它，伪元素不会渲染
真正容易被忽略的，是 RTL 场景下的方向适配。哪怕当前只做中文站，一旦未来要出海，border-start 就不是“可选项”，而是“必选项”。另外，竖线看起来“不够长”，第一反应不该是调 height，而是检查父容器有没有 vertical-align、line-height 或 align-items 在暗中干扰。
