Bootstrap 5中如何利用Vertical-rule制作垂直分割线-Bootstrap教程-PHP中文网

bootstrap 5 中无 vertical-rule 类，应使用 border-start 实现垂直分割线，它兼容 rtl、语义正确且样式可控，避免误用 hr 或硬编码 border-left。

bootstrap 5中如何利用vertical-rule制作垂直分割线

Vertical-rule 在 Bootstrap 5 中根本不存在

Bootstrap 5 官方 CSS 类里没有 vertical-rule、vr 或任何叫 “vertical rule” 的内置组件。你搜到的可能是旧版文档残留、第三方插件，或是把 border-left / border-right 手动写成 “vertical rule” 的俗称。

用 border-left 实现垂直分割线最稳妥

这是最直接、兼容性最好、且完全可控的方式。适合分隔导航项、侧边栏与主内容、卡片内并排元素等场景。

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

推荐加在右侧元素上用 border-left，避免左侧元素外边距干扰布局流
宽度建议用 1px 或 0.0625rem（即 1px 在 16px 基准下），太粗会显得笨重
颜色别硬写 #dee2e6，优先复用 Bootstrap 的 border-color 变量，比如 var(--bs-border-color)
若用于响应式布局，记得在小屏下移除：用 border-left-sm-0 这类断点类（需自定义或配合 Sass）

<div class="d-flex">
  <div class="pe-3">左栏</div>
  <div class="ps-3 border-start border-secondary">右栏</div>
</div>

border-start 是 Bootstrap 5 推荐的语义写法

它比 border-left 更健壮——在 RTL（如阿拉伯语）页面中会自动变成 border-right，避免手动切方向逻辑。

border-start 对应 border-left（LTR）或 border-right（RTL）
配套有 border-start-0、border-start-primary、border-start-opacity-25 等变体
注意：它只作用于块级或 flex/grid 子项，对 inline 元素无效
如果用了 border-start 却没效果，大概率是父容器没设 display: flex 或 display: grid，导致子项未进入格式化上下文

别用 hr 元素强行竖着放

<hr> 是语义化的水平分隔符，Bootstrap 的 hr 样式默认带 width: 100% 和 height: 0，强行旋转（transform: rotate(90deg)）会破坏文档流、触发重排、且无法对齐文字基线。

旋转后 hr 的 margin 行为不可预测，尤其在 flex 容器中容易撑高父容器
无障碍支持差：<hr> 被读屏软件识别为“horizontal rule”，竖着用属于语义错配
真要动态控制方向，不如用伪元素 ::before + border-left，语义干净、样式隔离

实际项目里最容易被忽略的是 RTL 场景下的方向适配——哪怕当前只做中文站，一旦未来要出海，border-start 就不是可选项，而是必选项。另外，垂直线高度不匹配内容时，别急着调 height，先检查父容器是否设置了 align-items: flex-start 或存在 vertical-align 干扰。