如何在Bootstrap 3老项目中逐步替换遗留CSS而不翻车？

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 感知，强行改属性名不改计算逻辑，会导致栅格错位。

1. 先 grep 所有 left/right 出现在 JS 文件里的位置，标记是否参与布局计算
2. 检查所有自定义 .less 文件里是否用 margin-left 做算术（如 margin-left: @grid-gutter-width / 2），这类必须同步改写为逻辑方向变量（如 margin-inline-start + 新建 @inline-gutter-half）
3. 不要动 position: absolute; left: 10px 类规则——它们是定位锚点，不是流式间距，逻辑属性不适用

哪些类可以安全批量替换，哪些必须手改

Bootstrap 3 的 utility 类（如 .pull-left、.text-right）语义明确、使用场景单一，适合批量替换；但组件内部样式（如 .navbar-nav > li > a 的 padding-right）往往和 JS 行为耦合，必须逐个验证。

1. 可批量替换：.pull-left → .float-start（需补全 bootstrap-rtl.css 或自己加 [dir="rtl"] .float-start { float: right !important; }）
2. 可批量替换：.text-right → text-align: end（注意：IE11 不支持 end，得保留 text-align: right 作为降级）
3. 禁止批量替换：.col-md-offset-2 对应的 margin-left: 16.66666667% —— 这个值由栅格系统动态生成，改了会破坏所有响应式偏移
4. 谨慎替换：.btn-group > .btn 的 margin-left: -1px —— 这是为消除边框重叠设计的，改成 margin-inline-start: -1px 后在 RTL 下会反向叠加，得用 border-inline-end 替代方案

如何让新写的 CSS 和老样式和平共处

直接在老项目里写 margin-inline-start 很可能被 Bootstrap 3 的 !important 物理类覆盖。与其硬刚特异性，不如用作用域隔离 + 层级控制。

1. 给新功能模块包一层 <div class="modern-section">，然后所有新样式加前缀：.modern-section .card { padding-inline-start: 1rem; }
2. 在构建流程中，用 PostCSS 插件自动为新 CSS 添加 [dir="ltr"] 前缀（如 [dir="ltr"] .pad-start-2 { padding-inline-start: 0.5rem; }），避免污染全局
3. 禁用 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 都可能错乱。

1. 必须给所有 <input>、<textarea> 显式加 dir="auto" 或根据上下文设 dir="rtl"
2. 避免用 text-align: right 强制对齐输入框内容——这会覆盖浏览器原生 RTL 行为，导致 iOS Safari 中光标跳位
3. 检查 label 的 for 是否指向正确 id：Bootstrap 3 不自动注入 aria-labelledby，若 label 在 input 右侧（RTL 下），需手动加 aria-label 或调整 DOM 顺序

真正难的不是改属性名，而是识别哪些 CSS 是“活”的——它正被 JS 读取、被用户交互触发、被第三方插件依赖。每次替换前，用 DevTools 的 Computed 面板看该属性是否被 getComputedStyle 调用过，比盲目替换保险得多。