用 img-fluid 保证小屏 100% 宽度，再配合 d-block mx-auto 实现大屏居中；需确保父 col 有合适断点类（如 col-12 小屏满宽、col-md-6 大屏缩窄），并移除图片内联宽高属性。
图片在 Bootstrap col 中如何响应式居中且撑满小屏宽度
直接结论：用 img-fluid 保证小屏 100% 宽度，再配合 mx-auto d-block 实现大屏居中；但必须确保父容器（col）本身不强制拉伸或截断。
img-fluid 是必须的，但它只解决缩放，不解决居中
img-fluid 的本质是给图片加 max-width: 100% 和 height: auto，让图片随父容器宽度缩放。但它不会改变图片的行内默认行为——小屏下它会自然换行、左对齐，大屏下若原始尺寸小于 col 宽度，就会留白在右侧。
- 不加
img-fluid→ 小屏图片溢出、横向滚动 - 只加
img-fluid→ 小屏正常，但大屏仍靠左，不居中 - 必须额外加
d-block mx-auto→ 强制转块级 + 水平外边距自动分配
为什么 text-center 在 col 里经常失效
因为 text-center 只对行内元素（如默认的 <img>）生效，但一旦图片加了 img-fluid，它虽保持行内特性，却可能被父 col 的 flex 布局干扰（尤其在 row 使用 justify-content-* 时）。更可靠的方式是让图片自己成为可居中的块级元素：
- 加
d-block→ 脱离行内流，支持margin居中 - 加
mx-auto→ 左右外边距设为auto，前提是宽度小于父容器 - 避免在
col上写死width或flex-basis，否则可能压缩图片可用空间
典型写法：
<div class="col-md-6"> <br> @@##@@<br> </div>
大屏居中但小屏又想“占满”？注意父 col 的断点类
所谓“小屏占满宽”，其实是希望图片宽度 = 所在 col 的宽度。而 col 的实际宽度由断点类决定，比如 col-12 在所有屏幕都是 100%，col-md-6 在 ≥768px 才占一半。如果图片在小屏没撑满，大概率是用了类似 col-lg-4 这种只在大屏生效的类，导致小屏下 col 默认变窄（Bootstrap 默认小屏是 col-12，但如果你没显式写，可能被其他样式覆盖）。
- 小屏要满宽 → 确保
col有col-12或至少col-sm-12 - 大屏要居中 → 同时叠加更大断点类，如
col-md-6 col-lg-4，再靠mx-auto居中 - 别依赖
col自动居中：Bootstrap 的col本身不居中内容，只是划分网格
最易忽略的一点：图片本身如果有内联 width 或 height 属性，会覆盖 img-fluid 的 max-width 行为，导致响应式失效。删掉这些硬编码尺寸。
