img-fluid失效主因是父容器无明确宽度或样式被覆盖；需确保父容器有可计算宽度、自定义CSS在Bootstrap后加载、富文本图片手动补类，并避免width:100%和硬件加速干扰。
Bootstrap 图片响应式 CSS 不生效，绝大多数情况不是框架坏了，而是 img-fluid 类没起作用——它依赖的两个前提条件中至少有一个被破坏了：父容器没有明确宽度，或样式被更高优先级规则覆盖。
为什么加了 img-fluid 还是溢出
img-fluid 的核心规则只有两条：max-width: 100% 和 height: auto。但它只在「父容器有可计算宽度」时才有效。常见破坏场景：
- 父容器是
display: flex或position: absolute，且未设width/flex-basis - 外层有
white-space: nowrap，强制子元素不换行、不收缩 - 父容器设置了
min-width或flex-shrink: 0，图片“拒绝缩小” - 图片被套在
<div class="card">里，但没给<img>加img-fluid—— Bootstrap 不会自动穿透继承
自定义 CSS 写在 Bootstrap 前面
如果你写了全局重置：img { max-width: 100%; height: auto; }，却放在 Bootstrap CSS 之前加载，那它会被 Bootstrap 自带的同名规则覆盖（因为后加载的 CSS 优先级更高）。检查 <head> 中的顺序：
<!-- ❌ 错误：自定义 CSS 在前 --> <link href="style.css" rel="stylesheet"> <link href="bootstrap.min.css" rel="stylesheet">
<!-- ✅ 正确：Bootstrap 必须在前 --> <link href="bootstrap.min.css" rel="stylesheet"> <link href="style.css" rel="stylesheet">
富文本/动态插入的图片漏掉类名
从 CMS、Markdown 渲染器或富文本编辑器（如 TinyMCE）插入的图片，HTML 是运行时生成的，通常不会自动带上 img-fluid。不能指望它“默认响应”。解决方式很直接：
立即学习“前端免费学习笔记（深入）”；
- 用 JS 批量补类：
document.querySelectorAll('img:not(.img-fluid)').forEach(img => img.classList.add('img-fluid')) - 服务端渲染时，在输出 HTML 前统一注入
class="img-fluid" - 避免写
width: 100%—— 它会强制拉伸、破坏宽高比；max-width: 100%才是安全上限
最常被忽略的一点：iOS Safari 在某些硬件加速组合下（比如父容器有 transform: translateZ(0)），max-width: 100% 可能导致 1px 错位或模糊。这不是 Bootstrap 的问题，但现象看起来像“样式失效”，需要单独加 image-rendering: -webkit-optimize-contrast 缓解。
