Bootstrap 5 的 RTL 支持需手动设置 dir="rtl"，不自动检测语言；通过[dir="rtl"]选择器覆盖方向类，如ms-3在RTL下转为margin-right；text-end等语义化类替代text-right，确保行尾对齐；自定义组件和第三方插件需额外适配。

Bootstrap 5 的 RTL 支持不是“自动切换”，而是靠 dir="rtl" 触发预定义规则

bootstrap 5 并不会检测浏览器语言或用户系统设置来“自动”切 rtl —— 它只响应 html 根元素是否写了 dir="rtl"。没有这个属性，哪怕页面用阿拉伯语或希伯来语加载，所有布局仍按 ltr（从左到右）渲染。

原理很简单：Bootstrap 的 Sass 源码里大量使用了 [dir="rtl"] 属性选择器做条件覆盖。比如 .float-start 在 LTR 下编译为 float: left，而在 [dir="rtl"] .float-start 下则变成 float: right。它不改逻辑名，只改实际方向映射。

• 必须手动在 上加 dir="rtl"，否则 RTL 类（如 text-end、ms-auto）行为不变
• 不要指望 document.documentElement.dir = "rtl" 动态赋值后样式立刻重算——部分旧版 Safari 或未触发 CSSOM 更新的场景会漏掉重绘
• dir="rtl" 是全局开关，不能只对某个 <div> 单独启用 RTL 布局（除非你手动写局部 <code>[dir="rtl"] .my-section { ... }）

  为什么 text-right 不再管用？新类名 text-end 才是 RTL 友好设计

  Bootstrap 5 彻底移除了 text-left/text-right 这类“绝对方向”类名，统一换成 text-start/text-end。这不是为了换名字，而是让同一套 class 在 LTR 和 RTL 下语义一致：text-end 总是贴在行尾，不管行尾是右边（LTR）还是左边（RTL）。

  • 旧写法 class="text-right" 在 dir="rtl" 页面里依然向右对齐，结果文字挤在屏幕右侧，违背阅读习惯
  • 新写法 class="text-end" 在 LTR 下等于 text-align: right，在 RTL 下自动变成 text-align: left
  • 断点类也遵循该逻辑：text-md-end 在中屏及以上贴行尾，无需为 RTL 单独写一套类

  导航栏、间距、浮动类怎么“镜像”？看 Bootstrap 如何用 ms-/me- 替代 ml-/mr-

  Bootstrap 5 把所有带方向的 margin/padding/float/border 类都重构了：ml-3 → ms-3（margin-start），mr-2 → me-2（margin-end）。这些类在 [dir="rtl"] 下会被 Sass 编译成反向声明。

  

  VPS Bootstrap

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

  下载

  例如：

  .ms-3 {
    margin-left: 1rem !important;
  }
  [dir="rtl"] .ms-3 {
    margin-left: 0 !important;
    margin-right: 1rem !important;
  }

  • 组件如 .navbar-nav 默认用 ms-auto 推到右侧；在 RTL 下，ms-auto 实际生效的是 margin-right: auto，所以菜单自然“推到左边”
  • 别混用旧类和新类：ms-2 mr-3 会导致 RTL 下左右 margin 同时存在，布局错乱
  • 自定义 Sass 变量时，$enable-rtl 必须设为 true 才会生成 [dir="rtl"] 规则（默认为 true，但如果你覆盖了变量文件就得确认）

  RTL + 暗黑模式共存时，最容易被忽略的坑是 CSS 变量作用域

  Bootstrap 5.3 的暗黑模式靠 data-bs-theme="dark" 切换，RTL 靠 dir="rtl"，两者可同时存在。但问题出在 CSS 变量上：很多颜色变量（如 --bs-body-color）在 RTL 文件里没被重新声明，导致暗黑模式下文字颜色在 RTL 区域仍是浅色背景配浅色字。

  • 检查你的构建输出里是否真有 [dir="rtl"][data-bs-theme="dark"] 组合选择器 —— 默认 Bootstrap Sass 不生成这种嵌套，需手动扩展
  • 图标翻转（如 <i class="bi bi-chevron-right"></i>）在 RTL 下应自动变 chevron-left，但 Bootstrap 本身不处理图标方向，得靠额外 CSS：[dir="rtl"] .bi-chevron-right { transform: scaleX(-1); }
  • 第三方组件（如日期选择器、下拉菜单）若没适配 dir 属性，会卡在 LTR 逻辑里不动，不能只依赖 Bootstrap 原生组件

  RTL 不是开个开关就完事，它是整条样式链路的方向重映射。最常出问题的地方不在基础类，而在你写的自定义组件、第三方插件、以及那些忘了加 [dir="rtl"] 前缀的 CSS 片段。