应直接在<img>标签使用Bootstrap响应式可见性类（如d-md-none），而非作用于col容器，避免栅格占位破坏；需组合类实现区间显示（如d-none d-lg-block），并注意自定义断点需手动编译、清除内联宽高样式以确保完全隐藏且不占位。
用 img 自带的响应式类隐藏图片，别动 col
直接在 <img> 标签上加 Bootstrap 的可见性工具类，而不是试图给 <div class="col"> 加 d-none——因为图片藏了，但列容器还在占位，容易破坏栅格布局。Bootstrap 5+ 提供了 d-{breakpoint}-none 类，比如 d-md-none 表示「在 md 及更大断点下隐藏」。
-
d-sm-none：在sm（≥576px）及以上隐藏图片 -
d-md-none：在md（≥768px）及以上隐藏 -
d-lg-none：在lg（≥992px）及以上隐藏 - 注意：这些类只对应用它的元素生效，不影响父级
col的宽度计算
想「只在某个断点区间显示」？用组合类更稳妥
单靠 d-{bp}-none 只能控制「从某断点起隐藏」，如果要实现「仅在 lg 下显示，其他断点都隐藏」，得组合使用显隐类：
<img src="logo.png" class="d-none d-lg-block">
这行代码的意思是：默认隐藏（d-none），仅在 lg 及以上显示（d-lg-block）。同理：
-
d-none d-md-block d-xl-none→ 仅在md到xl-1区间显示（即 ≥768px 且 <1400px） - 顺序无关，但建议把
d-none放最前，逻辑更清晰 - 别用
d-lg-none d-xl-block这种写法——中间断层（xl以下、lg以上）会留白
自定义断点时，CSS 类名不会自动更新
如果你改过 Bootstrap 的 Sass 变量（比如新增了 xxl 断点或调整了 md 宽度），编译后的 CSS 不会自动给你生成对应类名。必须确认你用的 Bootstrap 版本是否包含目标断点的工具类：
- 查源码或文档：Bootstrap 5.3 默认支持
xs/sm/md/lg/xl/xxl - 若用了定制构建，需手动在
_variables.scss中定义$grid-breakpoints，再重新编译 - 浏览器里 inspect 元素，看 class 是否被解析成有效 CSS 规则（比如
d-md-none对应@media (min-width: 768px)）
图片本身有 width 或 max-width 会影响隐藏效果
如果图片设了内联 style="width: 100%" 或自定义 CSS 强制宽高，即使加了 d-md-none，某些旧版浏览器（如 IE11）可能仍会保留占位空间。稳妥做法：
- 移除图片上的内联宽高样式，改用 Bootstrap 的
img-fluid（保持响应式缩放） - 确保父容器没设置
min-height或padding等意外撑开空间 - 调试时临时加
border: 1px solid red看是否真「不可见且不占位」
真正要藏的是图片渲染结果，不是让它「透明」或「缩成 0」——d-* 类才是语义正确且兼容性最好的方式。
