<p>.col-xs-* 类在 Bootstrap 3 中仅作用于超小屏幕设备（如手机），用于定义列宽，但不改变其子元素的盒模型行为。</p>
为什么 col-xs-* 里放 input-group 会溢出容器
根本不是输入框本身太宽，而是 input-group 的默认结构在小屏下没被栅格约束住：它内部的 .input-group-addon 和 .form-control 都设了固定 width 或 flex，而 .col-xs-5 这类超小屏类只控制父容器宽度，不干预子元素盒模型行为。
常见错误现象：.col-xs-5 容器明明宽度够，但 .input-group 右侧按钮硬生生顶破右边界，滚动条出现或内容被裁剪。
-
.col-xs-*类在 Bootstrap 3 中仅作用于 float +width实现；若子元素含white-space: nowrap、min-width或未重置box-sizing，极易撑破 - Bootstrap 3 的
.input-group默认用display: table模拟行内块，table行为在窄列中容易拒绝收缩 - 别依赖
.col-xs-1做分隔符（如你代码里的.stripe），它的width: 8.333%在小屏下可能被四舍五入成 9px，加上padding和border就超了
col-md-* 正常但 col-xs-* 溢出，怎么统一修复
不能只调大 col-xs-* 数字——那只是掩盖问题。关键要让小屏下的 input-group 真正服从列宽约束。
- 给
.input-group加width: 100%，再加box-sizing: border-box，确保 padding/border 不额外增宽 - 把
.input-group-btn的white-space: nowrap改成white-space: normal，防止按钮文字强制单行撑开 - 对
.col-xs-*容器加overflow: hidden是临时止血，但会截断内容；更稳妥是加min-width: 0（触发 flex shrink）+word-break: break-word - 如果用了 Bootstrap 4+，直接换
flex版input-group：删掉旧的table结构，用.input-group .form-control+.input-group-text，它们默认支持 flex 自适应
多列总和≠12 导致的隐性溢出
很多人以为 .col-xs-5 .col-xs-5 .col-xs-1 能凑成一行，实际是错的——Bootstrap 栅格不校验列和，只按声明宽度分配空间。3×5+1=16，远超 12，结果就是所有列强行挤进一行，每个都压缩变形，最后集体右溢出。
- 必须保证同一
.row内所有.col-*的数字之和 ≤ 12；超出部分自动换行，但换行逻辑在小屏下极不稳定（尤其混用xs和md） -
.col-xs-5+.col-xs-5+.col-xs-2才是合法组合（5+5+2=12），右侧不会留白也不会溢出 - 若需动态列数（比如卡片数量不确定），放弃固定
col-xs-*，改用row-cols-2（Bootstrap 5）或display: flex; flex-wrap: wrap+min-width控制
嵌套 .row 漏写导致的级联溢出
这不是“内容太长”，而是布局上下文丢失：当你在 .col-xs-6 里直接塞另一个 .col-xs-3，它继承了外层 15px padding，却没被内层 .row 的 -15px margin 抵消，左右各多出 15px，两层嵌套就多出 30px，必然溢出。
- 任何子列（哪怕只有一列）进入父
.col-*后，第一件事必须是包裹一层.row，没有例外 - 检查浏览器开发者工具里子
.col-*元素的 computedpadding-left和padding-right—— 如果是 15px 且没被负 margin 抵消，就是漏了.row - Bootstrap 3 不支持嵌套
.row内的响应式断点切换（如.col-xs-6 .col-md-4），若需，得手动加媒体查询重置width
最易被忽略的是：溢出往往不是单一原因，而是 col-xs-* 宽度计算 + input-group 盒模型 + 缺失 .row 三层叠加的结果。修一个，另外两个还在暗处等着拖后腿。
