Bootstrap 5 的 RTL 支持需同时满足三个条件：引入 bootstrap.rtl.min.css、根元素设 dir="rtl"、使用逻辑类（如 ms-3/text-end）；仅加 dir="rtl" 无效，因默认 CSS 不含 [dir="rtl"] 规则。
Bootstrap 5 的 RTL 支持不是“加个 dir="rtl" 就自动生效”，必须同时满足三个硬性条件：引入 RTL 版本 CSS、根元素声明 dir="rtl"、使用语义化方向类（如 ms-3 而非 ml-3），缺一不可。
为什么只加 dir="rtl" 没反应？
默认的 bootstrap.min.css 是 LTR 专用构建产物，里面压根没写 [dir="rtl"] 相关规则。哪怕页面用阿拉伯语加载，只要没引入 bootstrap.rtl.min.css，所有栅格、按钮、表单控件仍按从左到右渲染。
- CDN 正确引入方式：
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.0/css/bootstrap.rtl.min.css" rel="stylesheet"> - Node.js 项目需确认
node_modules/bootstrap/dist/css/下存在bootstrap.rtl.min.css，而非仅靠 Sass 变量$enable-rtl: true编译——后者只在你自己构建时起作用 - HTML 必须写在
<html>根标签上：<html lang="ar" dir="rtl">；对某个<div>单独加dir="rtl"只影响文本流，不触发组件级翻转
ms-3 和 me-3 这类类名到底怎么选？
Bootstrap 5 彻底弃用了 ml-/mr- 这类物理方向类，改用逻辑方向类：ms-（margin-start）、me-（margin-end）、ps-（padding-start）、pe-（padding-end）。它们在 RTL 下会自动映射为右/左，前提是用了 RTL CSS 文件 + dir="rtl"。
-
ms-3在 LTR 下是margin-left: 1rem，在 RTL 下变成margin-right: 1rem - 如果误用
ml-3，它在 RTL 下不会自动翻转，始终是 left，导致间距错位 - 文本对齐请用
text-start/text-end，别用text-left/text-right—— 后者已废弃且无 RTL 响应
第三方插件（比如 bootstrap-datepicker）怎么适配 RTL？
这类插件的 RTL 支持是独立实现的，不依赖 Bootstrap 的 dir="rtl" 全局机制。必须显式传入 RTL 配置项，否则日期面板仍从左展开、月份名顺序错误。
-
bootstrap-datepicker需设置rtl: true选项：$('.datepicker').datepicker({ rtl: true, language: 'ar' }); - 语言包（如
bootstrap-datepicker.ar.min.js）本身已内置 RTL 规则，但若漏掉rtl: true，它只翻译文字，不翻转布局 - 自定义弹出层、下拉菜单等组件，需手动监听
[dir="rtl"]并调整transform或left/right定位逻辑——Bootstrap 不接管这些
最容易被忽略的是：RTL 不是“翻转一切”。像图标箭头（← →）、数字输入顺序、时间格式（14:30 还是 ٢:٣٠）、甚至表单验证提示位置，都需要单独校验。Bootstrap 只解决基础布局和工具类，业务逻辑层的 RTL 行为得自己兜底。
