必须手动设置dir="rtl"才能启用RTL，不设就无效；Bootstrap 5不自动检测语言或系统设置，仅响应html[dir="rtl"]开关，需搭配lang属性、bootstrap.rtl.min.css及ms-3等语义化类方可完整生效。
必须用 dir="rtl" 触发 CSS 选择器，不能靠 JS 切换 class 或 lang 属性来加载 RTL 样式文件——否则逻辑方向类（如 ms-2、text-end）根本不会生效。
为什么不能用 lang 属性配合 <link rel="stylesheet"> 动态切换？
lang 属性本身不触发浏览器重排或样式表重新解析，仅用于语义和无障碍；动态改 <link href> 会引发 FOUC（Flash of Unstyled Content），且无法保证 RTL 工具类与 HTML 方向同步。更关键的是：Bootstrap、Tailwind 等框架的 RTL 变体（如 rtl:ml-4、ms-3）全部依赖 [dir="rtl"] 这个属性选择器，不是 [lang]。
- 服务端渲染时，可直接根据语言生成带
dir="rtl"的<html>，并引入对应 CSS（如bootstrap.rtl.min.css） - 前端 SPA 场景下，应在路由切换后、首次渲染前就设置
document.documentElement.dir = 'rtl'，再让样式表加载完成 - 若强行用 JS 监听
lang改变并替换<link>，会导致dir缺失 → 所有rtl:类失效，ms/me类退化为物理方向行为
怎样安全地按语言加载 RTL 专用 CSS？
核心原则：CSS 加载时机必须早于 DOM 渲染，且 dir 必须在 <html> 上已存在。推荐两种落地方式：
- 构建时分离：VitePress、Next.js 等支持多语言静态生成的框架，可在构建阶段为
ar、he等语言目录输出独立 HTML，其中<html lang="ar" dir="rtl">+<link href="/css/app-rtl.css"> - 服务端注入：Node.js/PHP 输出 HTML 前，根据请求语言头或路径前缀（如
/ar/）决定是否写入dir="rtl"和对应<link>，避免前端任何 JS 干预 - 禁止做法：在
useEffect或DOMContentLoaded中才设置dir并插入<link>—— 此时首屏已按 LTR 渲染完毕，样式错乱不可逆
哪些 CSS 文件必须成对管理？
不是所有 CSS 都能“加个 RTL 版”就完事。以下三类必须严格配对，缺一不可：
立即学习“前端免费学习笔记（深入）”；
-
bootstrap.min.css和bootstrap.rtl.min.css：不能混用，也不能只引前者再靠dir强行翻转 - Tailwind 构建产物：启用
dir变体后，JIT 模式会生成[dir="rtl"] .ms-2 { margin-right: 0.5rem; }，但前提是你的tailwind.config.js启用了content扫描且模板中真实写了dir="rtl" - 自定义工具类：如你写了
.pull-right { float: right; }，RTL 下需额外提供[dir="rtl"] .pull-right { float: left; }，否则镜像失败
真正容易被忽略的是：字体栈和 dir 的耦合时机。中文页面设了 dir="rtl" 不会自动翻转文字方向（中文本就不 RTL），但会错误激活 rtl:ms-4，导致间距反向；而阿拉伯页面漏掉 dir="rtl"，哪怕字体全对、CSS 文件也加载了，ms-2 依然当 ml-2 用。这两者必须在 HTML 输出那一刻就对齐，不能留到运行时补。
