Bootstrap弹性布局RTL适配需三要素齐备：引入bootstrap.rtl.min.css、html根元素设dir="rtl"、使用ms/me/float-start等逻辑类；缺一则Flex主轴不翻转、对齐错乱、间距失效。
Bootstrap 弹性布局（Flex）本身不自动适配 RTL，必须配合完整的 RTL 环境才能正确翻转主轴方向、对齐方式和间距逻辑——只加 dir="rtl" 或只改 .flex-row-reverse 都不行。
必须引入 bootstrap.rtl.min.css 并设置 html[dir="rtl"]
Bootstrap 5 的 Flex 工具类（如 .d-flex、.justify-content-center）依赖 CSS 逻辑属性（justify-content、margin-inline-start 等）和 RTL 媒体查询，这些只在 bootstrap.rtl.min.css 中定义。默认的 bootstrap.min.css 是 LTR 专用的，即使你手动加 dir="rtl"，.flex-row 仍按左→右渲染，.ms-3 也不会变成右边距。
- CDN 引入示例：
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.rtl.min.css" rel="stylesheet">
-
<html dir="rtl">必须写在根元素，不能只加在某个<div>上；否则.d-flex容器内的.justify-content-between仍按 LTR 逻辑计算两端距离 - 禁止同时加载
bootstrap.min.css和bootstrap.rtl.min.css，否则 class 冲突（比如.float-start在两个文件里定义相反）
Flex 主轴方向翻转靠的是逻辑方向，不是 .flex-row-reverse
启用 RTL 后，.flex-row 自动变为「从右到左」主轴，.justify-content-start 对齐到右侧，.justify-content-end 对齐到左侧——这和你在 LTR 下手动加 .flex-row-reverse 效果一样，但机制不同：前者是浏览器根据 dir + 逻辑属性自动映射，后者是强制反转 flex-direction。
- 不要在 RTL 页面里再写
.flex-row-reverse，否则会二次翻转，导致内容顺序错乱 -
.flex-column不受影响（垂直方向无 RTL 概念），.flex-column-reverse行为也保持不变 -
.order-1到.order-5的数字顺序不变，但视觉位置从右往左排列（.order-1出现在最右边）
对齐与间距类必须用逻辑命名，禁用 left/right 物理属性
RTL 下所有物理方向类（ml-2、float-left、text-right）已废弃且不生效。Bootstrap 5 要求统一使用逻辑类：ms-2（margin-start）、float-start、text-start —— 它们会随 dir="rtl" 自动映射到右侧。
- 错误写法：
class="float-left ms-3"→float-left被忽略，ms-3生效但语义冲突 - 正确写法：
class="float-start ms-3"→ RTL 下等价于float: right; margin-right: 1rem - 响应式类也需对应，如
ms-md-0（中屏及以上取消 margin-start），不是mr-md-0 - 自定义 CSS 中避免写死
padding-left，改用padding-inline-start；若需兼容旧浏览器，用 Bootstrap 提供的@include rtl()Sass 混合宏
第三方组件或手写 JS 容易破坏 RTL 行为
Bootstrap 自身的 .d-flex 容器和对齐类在 RTL 下可靠，但任何硬编码物理方向的代码都会失效。比如日期选择器弹出方向、下拉菜单 transform: translateX(-4px)、JS 里用 element.getBoundingClientRect().left 判断位置，全都不适配 RTL。
- 检查第三方库文档是否声明 RTL 支持；未支持的，需监听
document.documentElement.dir动态切换偏移值 - JS 中读取位置应改用逻辑 API：
getBoundingClientRect().x或element.offsetParent?.getBoundingClientRect().x - 避免在
style属性里写内联float: left或margin-right: 8px，这类写法无法被 RTL CSS 覆盖
最关键的细节：RTL 不是“把页面镜像一下”，而是整套方向语义的重绑定。哪怕只漏掉 bootstrap.rtl.min.css 或忘了 dir="rtl"，Flex 布局就会退化成 LTR 行为，而你可能只注意到按钮图标朝向不对，却查不出 .justify-content-between 为什么没把两边撑开。
