唯一稳定且无需额外dom的做法是直接给左列加border-right配合col-6+col-6；vr类因高度固定且仅对flex/inline子项生效，在块级col上无效，故两栏布局中基本用不上。
直接给左列加 border-right，配合 col-6 + col-6，是唯一既稳定又无需额外 dom 的做法。其他方案要么失效（如 vr 在 col 上不生效），要么绕远（伪元素要调定位、响应式要重写）。
为什么 vr 类在两栏布局里基本用不上
vr 是 Bootstrap 5.2+ 新增的工具类，但它的 CSS 规则是 .vr { border-right: 1px solid var(--bs-border-color); height: 1rem; } —— 高度固定、仅对 inline 或 flex 子项起作用。而 col-6 是块级元素，vr 加上去完全没效果。
- 误用典型：
<div class="col-6 vr">左</div> <div class="col-6">右</div>→ 竖线不会出现 - 能用的场景仅限于 flex 容器内相邻子项之间，比如
<div class="d-flex"> <div>左</div> <div class="vr"></div> <div>右</div> </div> - 若项目 Bootstrap 版本 vr 根本不存在，强行加类等于白写
border-right 加在哪一列？怎么写才不出错
必须加在左列（col-6），且确保它和右列同属一个 row。加在右列会破坏右侧内容的 padding 边界，尤其当右列有 ps-3 这类内边距类时，竖线会被挤到文字右边空白处。
- 正确写法：
<div class="row"> <div class="col-6 border-right">左</div> <div class="col-6">右</div> </div> - 颜色需匹配主题：默认
border-right用的是var(--bs-border-color)，如果主题色已改，建议显式写border-right: 1px solid #dee2e6 - 小屏下必须移除：加
@media (max-width: 576px) { .border-right { border-right: none; } }，否则竖线会压住窄屏内容
等宽不是只靠 col-6，还要防内容撑开
col-6 算出的宽度是理论值，一旦左列里塞了长单词、大图或未设 word-break 的文本，flex 会优先让列“撑开”，导致右列被挤窄，竖线看起来偏右甚至错位。
- 强制列不被撑开：
<div class="col-6 border-right" style="min-width: 0;"> —— <code>min-width: 0是关键，它允许 flex 项目收缩 - 主内容区建议加
h-100或明确高度，避免两列高度差异过大时，竖线只画到短列底部 - 别依赖
g-3这类 gap 类：gap 会增加列间间距，让竖线离右列内容变远；真要留空隙，用pe-3控制左列右内边距更可控
竖线位置偏移、小屏错位、两列高度不一致——这些问题几乎都源于没确认父容器是否为 row、没处理内容溢出、或忘了响应式断点清理。真正干净的实现，从来不是堆类名，而是盯住 flex 行为本身。
