bootstrap容器溢出不能仅靠overflow-hidden解决，根本原因在于容器上下文缺失、子元素脱离文档流或栅格结构违规；.container内加该类仍溢出，因.row负边距未被抵消、.col无显式宽高、绝对定位元素脱离裁剪上下文，或.table-responsive父级设了overflow:hidden等限制性样式。
Bootstrap容器内内容溢出，**不是加个overflow-hidden就能解决的**。根本问题往往不在“内容太长”，而在容器上下文缺失、子元素脱离流、或栅格结构违规——直接套类只会让问题更隐蔽。
为什么.container里加了overflow-hidden还溢出
因为.container本身是块级元素，但它的宽度由max-width和padding共同决定，而overflow只对“自身盒模型边界内”的内容起作用。一旦内部有：.row（带margin-left: -15px）、绝对定位子项、或未约束宽高的.col，溢出就发生在容器边界之外，overflow-hidden完全捕获不到。
-
.row的负外边距必须被.container的padding: 15px抵消；若.row被塞进.col或flex父容器里，负边距直接拖出视口 -
.col作为flex子项，默认不设width，浏览器无法判定“哪里算溢出”，overflow-hidden形同虚设 - 子元素用了
position: absolute或transform，就脱离了.container的溢出裁剪上下文
.table-responsive滚动条不出现的真因
它只是个display: block; overflow-x: auto的div，但滚动能力极度依赖父级是否“放行”。常见失效链：
- 直接父元素设了
overflow: hidden或overflow: clip——滚动被截断 - 父元素是
display: flex且没配flex-shrink: 0，.table-responsive被压缩到无法撑开 - 父元素是
display: grid，破坏了其块级流式行为 - Bootstrap 4 中
.table-responsive只在max-width: 576px下生效，桌面端压根没样式
验证方法：DevTools 里临时删掉父级overflow或display，滚动恢复即定位成功。
图片/卡片/文字三类典型溢出怎么分别治
不同内容类型，溢出机制完全不同，不能一招打天下：
-
图片溢出：优先用
img-fluid，但前提是父容器有明确宽度（如.col-6）；若无效，检查父级是否含white-space: nowrap或min-width，避免写width: 100%（会拉伸变形） -
卡片溢出：别在
.col上加overflow-hidden，应加在.card上，并确保.card有显式height或max-height；若含.card-img-top，overflow必须作用于.card而非.col -
文字溢出：单行截断需三件套：
white-space: nowrap+overflow: hidden+text-overflow: ellipsis；多行截断必须用-webkit-line-clamp（Firefox 需补display: block），Bootstrap 不提供开箱即用方案
最易被忽略的一点：所有修复都建立在「结构合规」前提下——.container → .row → .col三层嵌套缺一不可，.row绝不能嵌套.row，也绝不能脱离.container单独存在。否则，任何CSS补丁都是在给沙堡刷漆。
