bootstrap 页面支持 rtl 需使用 5.2+ 版本，根元素设 dir="rtl" 和对应 lang 属性，加载 bootstrap.rtl.min.css 或 sass 中启用 $enable-rtl: true；仅加 dir="rtl" 无效，因默认 css 不响应方向属性。
如何让 Bootstrap 页面支持 RTL（从右向左）布局
Bootstrap 原生支持 RTL，但不是开箱即用——必须显式启用，且依赖正确的 HTML 属性和构建流程。直接在 dir="rtl" 的页面里引入默认 CSS，布局不会自动翻转。
- 必须使用 Bootstrap 5.2+（5.0–5.1 的 RTL 支持不完整，
float、text-align等规则缺失） - HTML 根元素需声明
dir="rtl"和lang="ar"（或其他 RTL 语言） - 不能只靠 CDN 引入
bootstrap.min.css；要加载专门的 RTL 版本：bootstrap.rtl.min.css - 若用 Sass 自定义构建，需在入口文件顶部设置
$enable-rtl: true，并导入bootstrap/scss/bootstrap-rtl
为什么 dir="rtl" 单独加在 body 上没用
因为 Bootstrap 默认 CSS 是 LTR 优先的：它的 margin-left、padding-right、text-align: left 等规则是硬编码的，不会响应 dir 属性动态切换。浏览器的 dir 只影响原生元素（如 p、input），不触发框架级样式重算。
- 错误做法：
+bootstrap.min.css→ 按钮图标仍在左边，栅格列顺序错乱 - 正确路径：用
bootstrap.rtl.min.css（已预编译所有left/right对调、start/end逻辑替换） - 验证是否生效：检查
.float-start是否生成float: right，.ms-2是否对应margin-right: 0.5rem
bootstrap.rtl.min.css 和 LTR 版本能共存吗
可以，但必须手动控制加载逻辑，不能同时激活。Bootstrap 官方不提供运行时 RTL 切换能力——没有 JS API，也不监听 dir 变化。
- 典型方案：服务端根据用户语言返回不同 HTML，分别引入
bootstrap.min.css或bootstrap.rtl.min.css - 前端动态切换需自行实现：卸载旧 link 标签，插入新 link，并手动触发组件重初始化（如
new bootstrap.Modal(...)） - 注意 class 名不变（仍是
.btn、.col），但内部方向逻辑已翻转；无需改 HTML 结构 - 第三方插件（如日期选择器）大概率不兼容 RTL，需单独适配或换库
多语言文本 + RTL 布局的常见坑
RTL 不等于“阿拉伯语”，而是布局方向；多语言切换时，字体、行高、标点宽度、数字书写顺序（如阿拉伯数字在阿拉伯语中仍从左到右）都可能出问题。
-
lang属性必须准确：阿拉伯语用lang="ar"，希伯来语用lang="he"，否则屏幕阅读器和字体回退异常 - 中英文混排时，
unicode-bidi: plaintext可能被忽略，导致数字或括号位置错乱；建议对纯数字字段加dir="ltr" - Bootstrap 表单控件（如
form-control）在 RTL 下光标起始位置正常，但自定义::placeholder需额外写[dir="rtl"] ::placeholder - 图标字体（如 Bootstrap Icons）本身无方向性，但若用
float-start控制位置，RTL 下会自动右对齐——这点很省心，但也容易误以为“所有东西都翻转了”，其实 SVG 内联图标仍需手动镜像
RTL 支持的关键不在“加个属性”，而在构建链路和 HTML 结构的全程对齐；漏掉 Sass 变量、CDN 文件名或 dir 位置中的任意一环，都会导致部分区域翻转、部分卡死在 LTR。
