Bootstrap中最该替换的物理属性是：margin-left/right→margin-inline-start/end、padding-left/right→padding-inline-start/end、text-align:left/right→start/end、border-left/right→border-inline-start/end，因这些在RTL或多书写方向下易错位，而margin-top/bottom可暂缓替换。
因为 Bootstrap 的 HTML 结构和类名体系天然适配逻辑方向，但默认 CSS 仍大量使用 margin-left、padding-right 等物理属性——直接改用逻辑属性能一劳永逸解决 RTL 适配、垂直书写支持、以及 utility 类冲突问题，且几乎零成本。
Bootstrap 中哪些物理属性最该替换成逻辑属性？
不是所有地方都需要改，优先替换那些在多语言或响应式场景中频繁出问题的样式点：
-
margin-left/margin-right→ 改为margin-inline-start/margin-inline-end（尤其用于按钮间距、表单控件对齐） -
padding-left/padding-right→ 改为padding-inline-start/padding-inline-end（如.card内边距、导航项缩进） -
text-align: left/text-align: right→ 改为text-align: start/text-align: end（避免阿拉伯语下文本错位） -
border-left/border-right→ 改为border-inline-start/border-inline-end（如分隔线、标签边框）
注意：margin-top/margin-bottom 可暂不改——它们对应 margin-block-start/margin-block-end，但 block 方向在 LTR/RTL 下一致，优先级低于 inline 方向适配。
为什么直接覆盖 Bootstrap 的 utility 类会失败？
Bootstrap 的 ms-3（margin-left: 1rem）或 pe-2（padding-right: 0.5rem）本质是物理属性硬编码。当你写：
立即学习“前端免费学习笔记（深入）”；
.my-component { padding-left: 2rem; }它在 RTL 下仍往左撑开，而用户期望的是“内容起始侧”，结果错位。更糟的是，utility 类常带 !important，你的规则可能被无视。
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
正确做法是：停用物理 utility 类，自己定义逻辑版 utility：
.pad-inline-start-2 { padding-inline-start: 0.5rem; }
.btn-icon { margin-inline-end: 0.25rem; }这样既避开 Bootstrap 的特异性陷阱，又保持语义清晰。
RTL 切换时，为什么 data-bs-* 属性不自动翻转？
data-bs-toggle、data-bs-target 这类属性只参与 JS 行为控制，不触发 CSS 重绘。真正影响布局的是 CSS 规则本身——哪怕你加了 dir="rtl" 或 html[dir="rtl"]，只要样式里还有 margin-right: 16px，元素就仍往右偏移。
必须同步做两件事：
- 确保根元素有
dir属性或[dir="rtl"]选择器生效 - 所有涉及方向的自定义 CSS 全部使用逻辑属性，否则
[dir="rtl"] .my-card里再写margin-right: 20px依然无效 - 避免依赖 Bootstrap 的
.float-start——它编译为float: left，应改用float: inline-start
最容易被忽略的点：逻辑属性生效的前提是 writing-mode 和 direction 被浏览器正确识别。如果页面没设 <html dir="rtl"> 或没触发 [dir="rtl"] CSS 块，margin-inline-start 就永远等于 margin-left，起不到适配作用。
