必须手动设置 dir="rtl" 才能启用 RTL，不设就无效；Bootstrap 5 不自动检测语言或系统设置，仅响应 html[dir="rtl"] 开关，需搭配 lang 属性、bootstrap.rtl.min.css 及 text-end/ms-3 等语义化类方可完整生效。
必须手动设置 dir="rtl" 才能启用 RTL，不设就无效
Bootstrap 5 不会自动检测语言或系统设置来切换方向，dir="rtl" 是唯一触发 RTL 样式生效的开关。只改 lang="ar" 或用 JS 动态赋值 document.documentElement.dir = "rtl" 都不够——部分旧版 Safari 可能不重绘，必须在 HTML 初始加载时就写死在 标签里。
常见错误现象：
- 页面用了阿拉伯语但布局仍是左对齐，文字挤在右侧
- 加了
lang="he"却发现ms-3还是往右加 margin - 动态切换语言后样式没变，以为是 Bootstrap bug，其实是没触发 CSSOM 重计算
正确做法：
-
—— 两个属性缺一不可 - 确保加载的是
bootstrap.rtl.min.css（CDN 或构建产物），不是普通 LTR 版本 - 不要混用
bootstrap.min.css和bootstrap.rtl.min.css，会导致方向规则冲突
text-end 替代 text-right，类名语义化才是关键
Bootstrap 5 彻底废弃了 text-left/text-right 这类绝对方向类，统一用 text-start/text-end。这不是为了“换名字”，而是让同一 class 在 LTR/RTL 下都保持语义一致：行尾永远是阅读终点。
例如：
-
class="text-end"在 LTR 页面 →text-align: right -
class="text-end"在dir="rtl"页面 →text-align: left（即行尾） - 继续用
text-right就会强制右对齐，RTL 下文字贴右，违背阿拉伯语阅读习惯
同理，间距类也遵循该逻辑：ms-3（margin-start）在 RTL 下编译为 margin-right: 1rem，me-2 变成 margin-left。栅格列顺序（col-6 左右排列）、浮动（float-start）、文本对齐（justify-content-end）全部自动镜像。
第三方组件大概率不兼容 RTL，得单独适配
Bootstrap 自身的按钮、卡片、表格等原生组件在启用 RTL 后表现良好，但几乎所有第三方插件（日期选择器、富文本编辑器、图表库）都不响应 [dir="rtl"] 选择器。
典型问题：
-
bootstrap-datepicker的月份导航箭头仍指向左/右，而非“上月/下月”语义 -
bootstrap-wysiwyg工具栏按钮未翻转，图标和文字顺序错乱 - 表格排序图标（↑↓）在 RTL 下仍出现在列头右侧，应移到左侧才符合直觉
解决思路：
- 优先选明确标注 RTL 支持的库（如 Flatpickr、Tui Calendar）
- 用
[dir="rtl"] .my-datepicker .prev-btn { transform: scaleX(-1); }手动镜像 - 避免依赖 float / left / right 硬编码的自定义组件，改用 start/end 语义类
Sass 构建时启用 $enable-rtl: true 更可控，但不能和 CDN 混用
如果你用 Sass 自定义构建 Bootstrap（比如改主题色、删组件），必须在入口 SCSS 文件顶部第一行写 $enable-rtl: true;，再 @import "bootstrap/scss/bootstrap-rtl";。这样生成的 CSS 是单文件、全量 RTL，不会漏掉 float 或 spacing 规则。
注意点：
- 5.0–5.1 的 RTL 支持不完整，
float、text-align相关规则缺失，必须用 5.2+ 版本 - 不能同时
@import "bootstrap/scss/bootstrap"和@import "bootstrap/scss/bootstrap-rtl"，否则 LTR 规则会覆盖 RTL - CDN 引入
bootstrap.rtl.min.css是最简方案，适合静态站点；Sass 方案适合需要深度定制 RTL 行为的项目
容易被忽略的是：RTL 不是“开箱即用”的功能，它依赖三要素同时成立——正确的 HTML 属性、正确的 CSS 文件、正确的 class 命名习惯。少一个，布局就会出偏。
