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。它不改逻辑名，只改实际方向映射。
- 必须手动在
<html>上加dir="rtl"，否则 RTL 类（如text-end、ms-auto）行为不变 - 不要指望
document.documentElement.dir = "rtl"动态赋值后样式立刻重算——部分旧版 Safari 或未触发 CSSOM 更新的场景会漏掉重绘 -
dir="rtl"是全局开关，不能只对某个<div>单独启用 RTL 布局（除非你手动写局部[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 编译成反向声明。
例如：
.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 片段。
