正确做法是给除最后一列外的所有列加右边界，并用 mx-n* 类抵消父容器的 gutter 间隙影响；也可用伪元素 ::after 实现更干净的竖线，或使用 bootstrap 5.3+ 的 border-end 类。
用 border-right 配合负 margin 或 padding 调整间距
Bootstrap 默认的栅格（如 col-md-6）之间没有分隔线，直接加 border-right 会导致最右侧列也出现多余竖线，且可能破坏对齐——因为边框会额外增加宽度，撑开容器。
正确做法是给除最后一列外的所有列加右边界，并用 mx-n* 类抵消父容器的 gutter 间隙影响。例如在 row 上加 mx-n2，子列加 px-2 和 border-right：
<div class="row mx-n2"> <div class="col-md-4 px-2 border-right">左</div> <div class="col-md-4 px-2 border-right">中</div> <div class="col-md-4 px-2">右</div> </div>
- 必须手动去掉最后一列的
border-right，不能依赖 CSS 的:not(:last-child)—— Bootstrap 的列在响应式断点下顺序可能变化，伪类不可靠 - 如果用了
g-3这类间距类，px-2的值要和 gutter 匹配（比如g-3对应px-3），否则内容会溢出或留白异常 - 竖线颜色、粗细通过
border-right的修饰类控制，如border-right-secondary、border-right-opacity-25
用伪元素 ::after 实现更干净的竖线
避免边框影响盒模型，更适合需要精确控制位置或带圆角/渐变效果的场景。关键在于把伪元素定位在列的右侧边缘，且仅作用于非末尾项。
需配合自定义 CSS：
.col-divider::after {
content: "";
position: absolute;
top: 1rem;
bottom: 1rem;
right: 0;
width: 1px;
background-color: #dee2e6;
}
.row > .col:not(:last-child) {
position: relative;
}
.row > .col:not(:last-child)::after {
content: "";
position: absolute;
top: 1rem;
bottom: 1rem;
right: 0;
width: 1px;
background-color: #dee2e6;
}
- 必须给非末尾列设
position: relative，否则::after无法相对于列定位 -
top/bottom值用于留出上下呼吸感，避免顶到文字基线；若列高不一致，改用height: 100%并确保父列有position: relative - 响应式断点切换时（如从 3 列变 1 列），
:not(:last-child)仍有效，但需测试移动端是否误加线——建议加媒体查询关闭小屏竖线
使用 border-end 类（Bootstrap 5.3+）
新版 Bootstrap 引入了逻辑属性类，border-end 会根据文档流方向自动映射为 border-right（LTR）或 border-left（RTL），语义更准，且支持响应式前缀。
写法简洁，但仍需处理末尾列：
<div class="row"> <div class="col-md-4 border-end">A</div> <div class="col-md-4 border-end">B</div> <div class="col-md-4">C</div> </div>
-
border-end在 RTL 页面下会自动翻转，无需额外适配 - 它不支持
border-end-opacity-*这类修饰，透明度需用rgba()颜色值或自定义 CSS - 5.3 之前版本无此功能，强行使用会被忽略——检查
bootstrap.min.css版本号，或用npm list bootstrap
竖线对齐不准？先查 box-sizing 和父容器 overflow
常见现象：竖线比文字低半行、右侧被截断、或在 Safari 下闪动。根源常是盒模型或渲染层问题。
- 确保所有列和 row 都继承
box-sizing: border-box（Bootstrap 默认已设，但重置 CSS 或第三方库可能覆盖） - 父
row若有overflow: hidden，可能导致绝对定位的伪元素被裁剪——改用overflow: visible或移除 - Safari 对
transform: translateZ(0)敏感，若列内用了该样式，可能干扰伪元素渲染，临时加will-change: transform或换用border - 字体加载未完成时，行高计算不准，竖线位置浮动——可等
font-display: swap稳定后再初始化布局，或用line-height固定值替代em
实际项目里最容易漏的是响应式断点下的“最后一列”判定逻辑——PC 端三列，平板变两列，手机变一列，每次变化都要重新评估哪几列该画竖线。与其硬编码，不如用 JS 动态加 class，或者干脆放弃竖线，改用间距 + 阴影做视觉区隔。
