Bootstrap 3中全局替换margin-left会出事，因JS插件（如dropdown）硬编码left值、.less变量（如@grid-gutter-width）用于padding-left计算且无RTL感知，且绝对定位规则（position: absolute; left）不适用逻辑属性。
为什么直接全局搜替换 margin-left 会出事
Bootstrap 3 的 CSS 大量依赖物理方向属性，但很多地方被 JS 插件或自定义逻辑硬编码了行为。比如 $('.dropdown-menu').css('left', offset) 这类 jQuery 直接操作 left 值的代码，一旦你把全局 margin-left 改成 margin-inline-start，JS 仍往左算偏移，而 CSS 已按逻辑方向渲染，结果菜单飘到屏幕外。
更隐蔽的是：某些 .less 变量（如 @grid-gutter-width）被用于计算 padding-left，而这些变量本身没做 RTL 感知，强行改属性名不改计算逻辑，会导致栅格错位。
- 先 grep 所有
left/right出现在 JS 文件里的位置，标记是否参与布局计算 - 检查所有自定义
.less文件里是否用margin-left做算术（如margin-left: @grid-gutter-width / 2），这类必须同步改写为逻辑方向变量（如margin-inline-start+ 新建@inline-gutter-half） - 不要动
position: absolute; left: 10px类规则——它们是定位锚点，不是流式间距，逻辑属性不适用
哪些类可以安全批量替换，哪些必须手改
Bootstrap 3 的 utility 类（如 .pull-left、.text-right）语义明确、使用场景单一，适合批量替换；但组件内部样式（如 .navbar-nav > li > a 的 padding-right）往往和 JS 行为耦合，必须逐个验证。
- 可批量替换：
.pull-left→.float-start（需补全bootstrap-rtl.css或自己加[dir="rtl"] .float-start { float: right !important; }） - 可批量替换：
.text-right→text-align: end（注意：IE11 不支持end，得保留text-align: right作为降级） - 禁止批量替换：
.col-md-offset-2对应的margin-left: 16.66666667%—— 这个值由栅格系统动态生成，改了会破坏所有响应式偏移 - 谨慎替换：
.btn-group > .btn的margin-left: -1px—— 这是为消除边框重叠设计的，改成margin-inline-start: -1px后在 RTL 下会反向叠加，得用border-inline-end替代方案
如何让新写的 CSS 和老样式和平共处
直接在老项目里写 margin-inline-start 很可能被 Bootstrap 3 的 !important 物理类覆盖。与其硬刚特异性，不如用作用域隔离 + 层级控制。
立即学习“前端免费学习笔记（深入）”；
- 给新功能模块包一层
<div class="modern-section">，然后所有新样式加前缀：.modern-section .card { padding-inline-start: 1rem; } - 在构建流程中，用 PostCSS 插件自动为新 CSS 添加
[dir="ltr"]前缀（如[dir="ltr"] .pad-start-2 { padding-inline-start: 0.5rem; }），避免污染全局 - 禁用 Bootstrap 3 的
.hidden-xs等响应式工具类，改用自定义媒体查询：@media (max-width: 575px) { .hide-on-xs { display: none; } }—— 这样既避开老断点逻辑，又保持语义清晰
RTL 切换时最常被忽略的 DOM 属性
dir="rtl" 加了，CSS 也改了逻辑属性，但表单控件还是不对齐？问题大概率出在 input 和 textarea 的 dir 属性没同步更新。
Bootstrap 3 的 .form-control 类没处理文本方向，它只设了 width 和 border。当父容器 dir="rtl" 时，输入框内文字虽自动右对齐，但光标、placeholder 位置、甚至 text-indent 都可能错乱。
- 必须给所有
<input>、<textarea>显式加dir="auto"或根据上下文设dir="rtl" - 避免用
text-align: right强制对齐输入框内容——这会覆盖浏览器原生 RTL 行为，导致 iOS Safari 中光标跳位 - 检查
label的for是否指向正确id：Bootstrap 3 不自动注入aria-labelledby，若 label 在 input 右侧（RTL 下），需手动加aria-label或调整 DOM 顺序
真正难的不是改属性名，而是识别哪些 CSS 是“活”的——它正被 JS 读取、被用户交互触发、被第三方插件依赖。每次替换前，用 DevTools 的 Computed 面板看该属性是否被 getComputedStyle 调用过，比盲目替换保险得多。
