Bootstrap 5需显式引入bootstrap.rtl.min.css/js并设html的dir="rtl"才能启用RTL；栅格、间距等类自动镜像，但须避免硬编码left/right及混用LTR/RTL文件。
Bootstrap 5 如何启用 RTL 支持
bootstrap 5 原生支持 rtl，但不是开箱即用——必须显式引入 rtl 版本的 css 和 js，并设置 dir="rtl"。默认的 bootstrap.min.css 是 ltr 专用的，直接加 dir="rtl" 不会翻转布局。
- 使用官方提供的 RTL 构建版本：
bootstrap.rtl.min.css和bootstrap.rtl.min.js（CDN 或 node_modules 中均有） - HTML 根元素必须声明
dir="rtl"，例如：；仅对某个容器加dir不足以触发全局 RTL 行为（如栅格、按钮、表单控件方向） - 不要混用 LTR 和 RTL 的 CSS 文件，否则会出现方向冲突（比如按钮图标朝左、文字却右对齐）
RTL 下栅格系统（grid）的行为变化
Bootstrap 的 .row 和 .col 在 RTL 模式下自动镜像：.float-start 变成右浮动，.ms-3（margin-start）实际作用在右边，.text-start 对齐到右侧。这是通过 CSS 逻辑属性（margin-inline-start 等）和 RTL 选择器实现的，不是靠 JS 动态重写类名。
-
.col-6依然占半宽，但左右顺序翻转：原本<div class="col-6">A</div> <div class="col-6">B</div>在 LTR 中 A 左 B 右，在 RTL 中变成 A 右 B 左 -
.order-类仍按数字升序排列，但视觉顺序是反的——.order-1出现在最右边，.order-2紧挨其左 - 避免手动覆盖
float、text-align或margin-left/right，这会破坏 RTL 适配；改用float-start/float-end、text-start/text-end、ms/me/mx
自定义组件或第三方插件的 RTL 兼容问题
Bootstrap 自身组件（Button、Modal、Dropdown）在 RTL CSS 加载后基本可用，但任何硬编码了 left/right 的 CSS、JS 或第三方库（如某些日期选择器、图表库）大概率失效。
- 检查第三方组件是否声明 RTL 支持；没支持的，需手动 patch：比如把
transform: translateX(-10px)改为translateX(10px)，或监听dir属性动态切换 - 自定义 SCSS 中避免写死
padding-left，改用padding-inline-start；若需兼容旧浏览器，可用@include rtl()混合宏（Bootstrap 5.3+ 提供） - JavaScript 中读取元素位置时，别依赖
offsetLeft或getBoundingClientRect().left判断“左边”，应改用getBoundingClientRect().x或逻辑方向 API（如element.offsetParent?.getBoundingClientRect().x）
构建时如何生成 RTL CSS（Sass 场景）
如果你用 Sass 自定义 Bootstrap 主题，不能直接编译默认 bootstrap.scss 得到 RTL 效果——它默认按 LTR 输出。必须显式导入 RTL 变量和覆盖逻辑。
- 入口文件中先设置
$enable-rtl: true，再@import "bootstrap/scss/functions"等后续模块 - 确保
bootstrap/scss/bootstrap-rtl.scss被最终引入（它内部已处理所有 RTL 逻辑），而不是只引bootstrap.scss - 如果用了
postcss-rtl等插件做自动翻转，慎用：它无法理解 Bootstrap 的语义类（如.ms-2），容易把本该保留的 left/right 写死值也翻转，导致双重 RTL
RTL 不是开关，是整套方向语义的重新映射。最容易被忽略的是：你写的每一条自定义 CSS、每一次 JS 位置计算、每一个未声明 RTL 支持的插件，都在悄悄破坏它。
