rtl下bootstrap布局错乱需系统修复：替换物理方向属性为逻辑属性，单引入bootstrap.rtl.min.css，覆盖form-floating和navbar-toggler等组件的硬编码样式，并避免ltr/rtl文件混用。
form-floating在RTL下标签偏右、输入框内边距错乱
这是 RTL 场景中最典型的硬编码残留问题：form-floating 内部依赖 text-align: left、padding-left 和 left: 0，这些物理方向值不会随 dir="rtl" 自动翻转。
必须手动覆盖关键样式：
.form-floating input, .form-floating textarea { text-align: right; padding-right: 1rem; padding-left: 0; }.form-floating label { left: auto; right: 0; }- 避免在外层加
text-end—— 它会干扰::placeholder的上浮逻辑，导致文字被截断
navbar-toggler折叠按钮悬在视口外
Bootstrap 5 RTL 版本未完全覆盖 .navbar-toggler 的对齐逻辑。它默认用 margin-left: auto 靠右，但 RTL 下应靠左，而 ms-auto 在 flex 容器中行为不稳定（依赖兄弟元素存在）。
直接重置更可靠：
-
.navbar-toggler { margin-left: 0; margin-right: auto; }（LTR/RTL 兼容写法） - 或更精准：
[dir="rtl"] .navbar-toggler { margin-inline-start: 0; margin-inline-end: auto; } - 若用 Sass，可配合
@include rtl() { ... }混合宏做条件编译
第三方组件或自定义 CSS 中的 left/right 硬编码失效
任何写死 left: 10px、transform: translateX(-20px) 或 padding-left 的地方，在 RTL 下都会错位。Bootstrap 的 RTL 规则只作用于它自己生成的类（如 ms-2），不接管你的手写样式。
修复原则是“逻辑化”：
- 把
left/right改成inset-inline-start/inset-inline-end - 把
padding-left/padding-right改成padding-inline-start/padding-inline-end - JS 中读位置别用
offsetLeft，改用getBoundingClientRect().x或监听dir属性动态切换数值符号
混用 LTR/RTL CSS 文件导致规则冲突
同时加载 bootstrap.min.css 和 bootstrap.rtl.min.css 是最常被忽略的致命错误。比如 .float-start 在 LTR 文件里是 float: left，在 RTL 文件里是 float: right，两者共存时最终渲染取决于加载顺序和选择器权重，结果不可控。
必须严格单轨：
- 只保留
bootstrap.rtl.min.css（CDN 地址形如https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.rtl.min.css） - 删掉所有
bootstrap.min.css引用 - 确保
存在且无 JS 动态修改 —— CSS 解析发生在 DOM 构建早期，JS 插入太晚
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
