bootstrap 3 的 col-xs- 在手机上不占半宽而堆叠或溢出，根本原因是其依赖 float + width 实现，未配合 .row 的负 margin 抵消列 padding，且若漏写 .col-xs- 或混用断点类导致回退为 block 堆叠，或列和超 12 引发强制换行错位。
Bootstrap 3 的栅格在小屏幕（xs）错位，基本不是 CSS bug，而是它仍依赖 float 布局 + clearfix 机制，一旦结构或断点类用错，就会塌陷、偏移、换行异常。
为什么 col-xs-6 在手机上不占半宽反而堆叠或溢出
根本原因是：col-xs-* 类在 Bootstrap 3 中只控制「超小屏」（col-xs-6 缺失），浏览器会回退到未定义宽度的 div，触发 float: left + 默认 width: auto，结果就是内容撑开、列宽失控、父 .row 高度塌陷。
-
col-md-6在手机上完全不生效——因为md断点只在 ≥992px 生效，小屏下无宽度约束 - 漏写
col-xs-6时，该.col实际等价于普通div，float仍存在但无宽度，易被长文本或图片撑破 - 嵌套
.row时没给父.col加padding: 0，导致子.row的负margin超出父容器边界，视觉上“右移”
修复 float 塌陷：必须确保每行有 .clearfix 或 .row 包裹
Bootstrap 3 的 .row 本身不含 clearfix（它靠 overflow: hidden 和负边距模拟），但一旦你手动清除了浮动、或在 .row 外加了 overflow: auto，就可能破坏其高度计算逻辑。
- 不要在
.row上设overflow: hidden—— 它会裁剪子元素的position: absolute内容（比如下拉菜单） - 如果用了自定义清除方式（如
<div class="clearfix"></div>），必须放在.row内部、所有.col之后，否则.row高度仍为 0 - 更稳妥做法：始终用
<div class="row"> 包裹一组 <code>.col-xs-*，别用<div class="row"><div class="col-xs-6">...</div></div>单列独占一行col-xs-* 不生效？检查是否被 float 回退或媒体查询覆盖
打开开发者工具，选中错位的
.col-xs-6元素，在 Styles 面板里看实际生效的width和float。常见干扰源：- 自定义 CSS 里写了
.col-xs-6 { float: none !important; }—— 直接废掉栅格浮动逻辑 - 引入了 Bootstrap 4+ 的 CSS 文件（哪怕只引了一部分），其中
col-xs-6已被废弃，类名失效 - 媒体查询顺序错乱：比如自己写的
@media (max-width: 767px) { .col-xs-6 { width: 100%; } }覆盖了 Bootstrap 原生规则 -
box-sizing被全局设为border-box但没同步改padding计算——Bootstrap 3 默认用content-box，padding会撑出额外宽度
最常被忽略的一点：Bootstrap 3 的
.col-xs-*必须和.row、.container一起用，单独写<div class="col-xs-6"> 在 <code>下，float会脱离文档流，且无负边距抵消，必然错位。 - 自定义 CSS 里写了
