用 border-right 给左列加边框最直接，需确保两列同属一个 row、小屏移除边框，并注意 padding 与响应式断点影响。
用 border-right 给左列加边框最直接
bootstrap 默认不提供“垂直分割线”组件，所谓两列间竖线，本质是给左侧列（或右侧列）加一条单侧边框。用 border-right 是最可控、最不易出错的方式。
常见错误是试图用 hr 或额外 div 模拟竖线——容易错位、响应式失效、还多一层 DOM。
实操建议：
- 确保两列在同一
row内，比如col-md-6+col-md-6 - 只给左列加
border-right: 1px solid #dee2e6（颜色可按 Bootstrap 主题色调整） - 记得在小屏幕（
xs）下移除该边框，避免竖线压住内容：@media (max-width: 576px) { .left-col { border-right: none; } } - 如果列内有 padding，边框会出现在 padding 区域内；若要从内容边缘起算，改用
margin-right配合负边距（不推荐，易冲突）
用 vr 工具类（Bootstrap 5.2+）但注意兼容性
vr 是 Bootstrap 5.2 引入的垂直分割线工具类，本质就是 border-right 的封装，但它只适用于「行内元素」或「flex 子项」，不能直接套在 col 上生效。
典型误用：把 vr 加到 div class="col"> 上——没效果，因为 col 是块级元素，vr 的 CSS 规则是 .vr { border-right: 1px solid var(--bs-border-color); height: 1rem; }，高度固定且依赖 inline 行为。
能用 vr 的场景：
- 放在
nav或button群中间，比如<button>A</button><div class="vr"></div><button>B</button> - 配合
d-flex容器使用，例如<div class="d-flex"><div class="pe-3">左</div><div class="vr"></div><div class="ps-3">右</div></div> - 确认项目 Bootstrap 版本 ≥ 5.2，低版本无此工具类
用伪元素 ::after 控制更精细但别漏 position
当需要自定义长度、偏移、阴影或动画时，伪元素比纯边框更灵活。但多数人栽在定位上：忘记设 position: relative 在父容器，导致 ::after 脱离文档流乱飘。
正确做法：
- 给包裹两列的
row或外层div加position: relative - 用
::after在左列右侧画线：.left-col::after { content: ""; position: absolute; top: 0.5rem; bottom: 0.5rem; right: -1px; width: 1px; background: #dee2e6; } - 注意
top/bottom值要避开内边距区域，否则竖线会被截断 - 如果列高不一致，伪元素高度需用
height: 100%并确保父容器有明确高度（flex 容器通常没问题）
响应式断点处竖线消失或错位？检查 gutter 和 flex-wrap
竖线在小屏变两行后还在原位置，或者和文字挤在一起，大概率是 gutter（列间距）和 flex 换行逻辑没对齐。
Bootstrap 的 row 默认 flex-wrap: wrap，一旦列宽超 100%，右列会掉到下一行，但竖线仍按原布局渲染，视觉上就“悬空”了。
- 最稳妥的是在
md及以上才显示竖线：@media (min-width: 768px) { .left-col { border-right: 1px solid #dee2e6; } } - 如果用了
gx-* / gy-*设置横向间距，竖线坐标要减去 gutter 值，否则会偏右 1–2px - 禁用换行（
flex-nowrap）能让竖线稳定，但代价是小屏出现横向滚动条，慎用
竖线看着简单，真正麻烦的是它总在你改完栅格、加完 padding、切到手机预览时突然不对劲——盯住定位上下文和断点边界，比调颜色重要得多。
