bootstrap多语言rtl布局需三要素齐备：引入bootstrap.rtl.min.css、html根元素设dir="rtl"和lang属性、使用ms/me/text-start/text-end等逻辑方向类；缺一将导致栅格错乱、图标位置错误、间距失效。
Bootstrap 多语言支持 RTL 布局，不是加个 dir="rtl" 就完事——必须用对 CSS 文件、设对 HTML 属性、写对工具类，三者缺一不可。否则按钮图标还在左边、栅格顺序错乱、间距反向失效。
必须用 bootstrap.rtl.min.css，不能只加 dir="rtl"
只在 里加属性，但引入的是 bootstrap.min.css（LTR 版本），布局完全不会翻转。因为 Bootstrap 默认 CSS 是硬编码 margin-left、float: left 等物理方向规则，不响应 dir 属性。
- ✅ 正确做法：引入官方预编译 RTL 版本 ——
bootstrap.rtl.min.css（CDN 或本地node_modules/bootstrap/dist/css/下） - ❌ 错误组合：
+bootstrap.min.css→ 所有ms-*、float-start类行为不变 - ⚠️ 混用风险：同时加载
bootstrap.min.css和bootstrap.rtl.min.css会导致方向冲突（比如ms-2先设margin-left，又被覆盖成margin-right，最终结果不可控）
HTML 根元素必须设 dir="rtl"，不能只加在 body 或 div 上
dir="rtl" 是全局开关，Bootstrap 的 RTL 规则全部基于 [dir="rtl"] 属性选择器生效。只加在 或某个容器上，.row、.col、.btn 等组件不会镜像。
- ✅ 必须写在
或上 - ❌
<div dir="rtl"><div class="d-flex">A</div></div>→ Flex 主轴方向不会自动翻转（除非你手动写[dir="rtl"] .d-flex { flex-direction: row-reverse; }） - ⚠️ 动态设置无效：
document.documentElement.dir = "rtl"在部分 Safari 版本中不会触发 CSSOM 重绘，样式可能不更新
必须用 ms/me/text-start/text-end，别再用 ml/mr/text-left/text-right
Bootstrap 5 彻底弃用物理方向类名。继续用 ml-3 或 text-right，在 RTL 页面里它们依然往左/右硬偏移，破坏阅读流。
- ✅ 替换规则：
ml-2→ms-2，mr-2→me-2，text-right→text-end - ✅ 断点也一样：
text-md-end在中屏及以上始终贴“行尾”，LTR 下是右，RTL 下是左 - ⚠️ 第三方组件或自定义 CSS 中若写了
padding-left、left: 10px，必须改为padding-inline-start或inset-inline-start: 10px，否则方向错乱
验证 RTL 是否真正生效的三个关键检查点
光看文字右对齐不够，得确认底层逻辑是否切换。打开浏览器开发者工具，检查以下三项：
- ✅ 查
.ms-2计算后的样式：应为margin-right: 0.5rem（而非margin-left） - ✅ 查
.float-start：在[dir="rtl"]下应为float: right - ✅ 查栅格顺序：
<div class="col-6">A</div> <div class="col-6">B</div>在 RTL 下，A 应显示在右侧，B 在左侧（视觉顺序翻转，但 DOM 顺序不变）
最容易被忽略的是：Sass 自定义构建时，如果没在入口文件顶部设 $enable-rtl: true，即使你写了 dir="rtl" 并引入了 bootstrap.rtl.min.css，自己写的 utility 类（比如 .my-spacing）也不会自动镜像——它压根没参与 RTL 编译流程。
