用border-right给左列加边框最直接，本质是通过单侧边框实现垂直分割线；需确保两列同属一个row，小屏下用border-right-sm-0移除，避免padding干扰。
用 border-right 给左列加边框最直接
Bootstrap 没有“垂直分割线”组件，所谓竖线，本质就是给某一列加单侧边框。border-right 加在左列上最可控，不会错位、不依赖 flex 或 RTL 逻辑，也无需额外 DOM 元素。
常见错误是给右列加 border-left ——容易和父容器或相邻元素的 margin/padding 冲突，尤其在嵌套 .row 里会漏缝或重叠。
- 必须确保两列同属一个
.row，例如col-md-6+col-md-6 - 只对左列设
style="border-right: 1px solid var(--bs-border-color);"，避免用工具类如.border-end（它可能被 padding 遮盖） - 小屏下需移除：加响应式类
border-right-sm-0，或手动写@media (max-width: 576px) { .left-col { border-right: none; } } - 若列内有
px-3等内边距，边框会画在 padding 外侧；要让线紧贴内容边缘，改用pe-0+ 内部再加ps-3
vr 工具类只在特定场景生效
vr 是 Bootstrap 5.2+ 引入的垂直分割线工具类，但它不是万能的——它的 CSS 规则是 .vr { border-right: 1px solid var(--bs-border-color); height: 1rem; }，高度固定、仅作用于 inline 或 flex 子项。
典型误用： 当需要竖线从内容顶部到底部、避开 padding 区域、或加阴影/动画时，伪元素比纯边框更灵活。但多数人失败是因为忘了定位上下文。 关键点：伪元素默认脱离文档流， 实际项目里最容易被忽略的是：哪怕当前只做中文站，一旦未来要出海，硬写 .col 是块级元素，.vr 的样式无法触发。
d-flex 容器中，比如
height: 1rem 是写死的，内容高时会露白用
::after 伪元素控制长度和位置::after 若没配 position: absolute 和正确的 position: relative 父级，就会飘走或压住文字。
.row 或自定义 wrapper）加 position: relative
.left-col::after { content: ""; position: absolute; top: 0.5rem; bottom: 0.5rem; right: -1px; width: 1px; background: var(--bs-border-color); }
top/bottom 值要略大于列内 py-* 值，否则线会被截断height: 100% 通常可行；但若父容器是普通 block，得显式设 min-height 或用 align-items: stretch
为什么
border-start 比 border-left 更推荐border-start 是 Bootstrap 5 对语义化方向适配的正式支持，它在 LTR 页面中等价于 border-left，在 RTL（如阿拉伯语、希伯来语）页面中自动转为 border-right，无需手动判断或 JS 切换。border-left 就得返工。而 border-start 一行代码就覆盖两种方向。
display: flex 或 display: grid 的子项上生效，所以必须确保父容器有对应 display 值border-start-0、border-start-secondary、border-start-opacity-25 等变体，比手写 CSS 更一致.col 上直接用——.col 默认是 block，需先加 d-flex 或 d-grid 才能激活格式化上下文align-items: flex-start，而不是急着调 height
