用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 子项。
典型误用：<div class="col vr"> ——没效果，因为 <code>.col 是块级元素，.vr 的样式无法触发。
- 能用的场景：放在
d-flex容器中，比如<div class="d-flex"> <div>左</div> <div class="vr"></div> <div>右</div> </div> - 也可用于按钮组、导航项之间：
<button>A</button><div class="vr"></div> <button>B</button> - 必须确认项目 Bootstrap 版本 ≥ 5.2；v5.1 及更早版本无此工具类
- 别指望它自动拉满高度——
height: 1rem是写死的，内容高时会露白
用 ::after 伪元素控制长度和位置
当需要竖线从内容顶部到底部、避开 padding 区域、或加阴影/动画时，伪元素比纯边框更灵活。但多数人失败是因为忘了定位上下文。
关键点：伪元素默认脱离文档流，::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-*值，否则线会被截断 - 如果列高不一致，且父容器是 flex，
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
