用 border-start 最稳妥，因它适配 RTL 且依赖 flex 布局；避免 border-right 错位，慎用 .vr（仅限 inline/flex 子项且需 ≥5.2）；下拉菜单用 dropdown-divider，栅格列间加竖线需处理 gutter 和 align-items。
导航栏按钮间加竖线，用 border-start 最稳妥
bootstrap 5 没有 vertical-rule 或 vr 这类“垂直分割线组件”，所谓竖线，本质就是单侧边框。给右侧导航项加 border-start 是官方推荐写法，它自动适配 rtl（如阿拉伯语），比硬写 border-left 更健壮。
常见错误是直接给 <li> 加 border-right：在 .navbar-nav 这种 flex 容器里，<li> 是 flex item，但若父容器没设 display: flex（比如误套了额外 <div>），边框就失效；更隐蔽的问题是，<li> 默认有上下 margin，边框会错位。
- 确保导航项包裹在
<ul class="navbar-nav">内，该类已设display: flex - 只对需要分隔的右侧项加
border-start，例如：<li class="nav-item border-start border-secondary"><a class="nav-link">关于</a></li> - 颜色优先用变量：
border-start+border-start-secondary，避免硬写#dee2e6 - 小屏下要移除：加响应式类
border-start-sm-0（需确认项目启用了 Bootstrap 的 Sass 断点编译）
.vr 类能用吗？看场景和版本
.vr 是 Bootstrap 5.2+ 新增的工具类，但它不是“万能竖线”——它只对 inline 元素或 flex/grid 子项生效，且高度固定为 1rem。直接加在 <li class="nav-item vr"> 上毫无效果，因为 <li> 是块级元素，.vr 的 CSS 规则是 .vr { border-right: 1px solid var(--bs-border-color); height: 1rem; }，高度写死、不继承父高。
能用的场景很窄：
- 放在
d-flex容器中：<div class="d-flex"><span>首页</span><div class="vr"></div><span>产品</span></div> - 按钮组之间：
<button class="btn">A</button><div class="vr"></div><button class="btn">B</button> - 必须确认项目 Bootstrap 版本 ≥ 5.2；5.1 及更早版本无此工具类
下拉菜单里的分割线，别用 <hr> 或空 <p>
Bootstrap 下拉菜单（.dropdown-menu）中，分割线应使用 <li class="dropdown-divider"></li>（Bootstrap 5）或旧版的 <li class="divider"></li>（Bootstrap 3/4）。这是语义正确、样式预置、且与悬停背景兼容的方式。
常见踩坑：
- 用
<hr>强行塞进下拉菜单：它默认是块级、width: 100%，在.dropdown-menu里会撑宽整个菜单，且无障碍识别为“水平分隔符”，语义错配 - 用空
<p>或<div>加边框：这些元素自带margin和默认高度，会导致分割线上下留白、悬停时背景色无法覆盖整行 - 自定义
.dropdown-divider高度时，别动height：它的样式依赖margin和overflow: hidden实现视觉分隔，改height可能破坏布局
栅格列之间加竖线，别碰 col 的 padding
两列（如 col-md-6）之间加竖线，最直接的是给左列加 border-right。但容易忽略的是：Bootstrap 栅格默认有 gutter（即列间间距），这个 gutter 是通过 padding 实现的。如果左列本身有 pe-3（右内边距），再加 border-right，竖线就会画在内边距区域外侧，看起来离内容很远。
解决办法：
- 去掉左列的右内边距：
<div class="col-md-6 pe-0">左</div><div class="col-md-6 ps-0">右</div> - 再给左列加边框：
border-end（Bootstrap 5 推荐）或border-right - 小屏下必须移除：用
border-end-sm-0或媒体查询@media (max-width: 576px) { .left-col { border-right: none; } } - 如果列高不一致，竖线长度不对——不是边框问题，而是父
.row没设align-items: stretch，导致子列高度不统一
