Bootstrap 3 中 offset-* 类未失效，而是因 float 布局限制导致换行：当列宽+偏移>12时触发换行；offset-md-6 实际为 margin-left:50%，叠加 col-md-6 的50%宽度超出100%；混用 push/pull 与 offset 会因机制冲突引发错位；响应式 offset 仅在指定断点生效，不向下兼容。
offset-* 类在 Bootstrap 3 中不是“失效”，而是会直接触发换行——只要列宽 + 偏移 > 12，它就不再偏移，而是整列掉到下一行。这不是 bug，是 float 布局的固有行为。
为什么 col-md-6 offset-md-6 会换行而不是右对齐
Bootstrap 3 的栅格基于 float: left，offset-md-6 实际生成的是 margin-left: 50%（因为 6/12 = 50%）。但关键在于：col-md-6 自身宽度也是 50%，两者相加超出了父 .row 的 100% 容量，浏览器只能把它挤到下一行。
- 写
col-md-4 offset-md-8：4 + 8 = 12 → 正常右对齐 - 写
col-md-5 offset-md-7：5 + 7 = 12 → 刚好卡满，不换行 - 写
col-md-5 offset-md-8：5 + 8 = 13 → 换行，且新行左侧空出 8 列宽度（视觉上像“偏移错位”） - 检查 computed styles 里
margin-left是否为66.6667%（对应 offset-md-8），如果是，说明类生效了，只是布局被撑爆了
push/pull 和 offset 混用必翻车
二者底层机制冲突：offset-* 靠 margin-left 推动整列；col-md-push-* 靠 left 偏移自身，不占文档流空间。混用会导致列定位错乱、重叠或空白异常。
- 同一行中，若已有
col-md-8 col-md-push-4，再给旁边列加offset-md-2，两列会互相挤压或错位 - 想让 A 列视觉右移、B 列视觉左移？必须严格满足：A 宽 + B 宽 = 12，且
push值 = B 宽，pull值 = A 宽（例如 A=col-md-3 + push-md-9，B=col-md-9 + pull-md-3） - 超过两列？Bootstrap 3 原生不支持，强行 push/pull 会破坏 float 流，建议改用 wrapper div + 手动
float: right
小屏下偏移消失，不是没生效，是断点未定义
Bootstrap 3 的响应式类只在对应断点及以上生效，且**不向下兼容**。比如 offset-md-3 在 xs 或 sm 下完全不生效，列会紧贴左边——这常被误认为“失效”，其实是设计如此。
- 要实现“小屏居中、中屏右偏”，必须显式写出所有断点：
offset-xs-0 offset-sm-0 offset-md-3 offset-lg-4 - 漏写
offset-xs-0，小屏下就会用浏览器默认 margin（通常是 0），看起来就是“突然贴边” - 别指望
offset-md-3在手机上看效果——打开 Chrome DevTools 的 device toolbar，切到 iPhone SE 尺寸，确认是否命中xs断点（
真正稳定的替代方案：手动 wrapper + text-align 或 float
当 offset 和 push/pull 都不可靠时，最可控的方式是放弃栅格偏移，改用语义清晰的包裹结构。
- 右对齐单列：
overflow: hidden） - 左右分栏且主内容需视觉前置：
.col-md-8加float: right，.col-md-4加float: left（DOM 顺序不变，视觉交换） - 避免在
.row上加text-align或overflow，会干扰 float 清除和负 margin 行为
Bootstrap 3 的偏移类本质是 float 工具，不是现代布局方案。一旦你发现需要三列重排、跨断点一致偏移、或与 flex 内容混排，就该意识到：不是写法错了，是技术栈该升级了——而修复的关键，永远是先看 computed styles，再查断点命中，最后确认 float 流是否被意外打断。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
