用 img-fluid mx-auto d-block 实现响应式居中：img-fluid 保证小屏占满宽度，mx-auto d-block 在大屏使图片居中，但需父容器 .col 有明确宽度（如 .col-md-6），且不能是 flex 塌缩状态。
图片在 Bootstrap .col 中响应式居中+宽度适配的写法
直接给结论：用 img-fluid 保证小屏占满宽度，再加 mx-auto d-block 实现大屏居中；但必须确保父容器（.col）有明确宽度（即不在 flex 布局下“塌缩”）。
为什么 img-fluid 单独用不居中
img-fluid 只设了 max-width: 100% 和 height: auto，它本身是行内元素，不会自动居中。浏览器默认按文本流渲染，左边对齐。
- 小屏时：
img-fluid让图片随.col宽度缩放，表现正常 - 大屏时：
.col变宽，图片只缩放到自身固有尺寸（比如 400px），剩下空白在右侧，看起来“靠左” - 如果父
.col外层是.row+display: flex，而图片没设d-block，margin: auto对行内元素无效
mx-auto d-block 必须和 img-fluid 配合使用
只有块级元素才能用 margin-left: auto; margin-right: auto 居中。d-block 把图片转成块级，mx-auto 才生效；img-fluid 确保它不会溢出容器。
<div class="col-md-6"> @@##@@ </div>
-
.col-md-6是关键：它给了父容器明确的宽度上下文（md及以上断点才生效），否则在 xs/sm 下.col默认是 100%，mx-auto没意义 - 不要加
width: 100%—— 会破坏img-fluid的自适应逻辑，导致小屏拉伸变形 - 避免在图片上直接写
style="width: 100%"，这会覆盖img-fluid的max-width
遇到居中失效？先检查这三个地方
常见“写了 mx-auto d-block 还是不居中”的真实原因：
- 父
.col没被正确包裹在.row里，或.row被设了justify-content-*类（如justify-content-center），干扰了内部margin计算 - 图片外层套了额外
<div> 且没设 <code>text-center或d-flex justify-content-center，而你误以为那层 div 是“容器” - 用了
col-*但没指定断点（如col-6），导致所有屏幕都固定宽度，大屏反而显得窄、居中不明显
最简验证方式：临时加 style="border: 1px solid red" 到 .col 上，看它实际宽度是否符合预期——居中永远是对父容器而言的，不是对视口。
