仅在竖屏手机显示需用媒体查询配合d-none，因Bootstrap无内置类；d-none+d-sm-block实为“手机+横屏+平板+PC都显示”，与需求相反。
怎么让元素只在手机上显示，PC上彻底不占位？
用 .d-none + .d-sm-block 组合最稳妥。bootstrap 4+ 已废弃 visible-xs-block 这类旧类名，改用 display 工具类控制渲染行为——关键在于“不占位”，而不是视觉隐藏（比如 opacity:0 或 visibility:hidden）。
-
.d-none全局隐藏（所有断点都设display:none） -
.d-sm-block在小屏幕及以上（≥576px）恢复为display:block，即手机横屏、平板、PC 全部显示 - 如果真要「仅竖屏手机」（.d-none .d-sm-block .d-md-none：先全关，再开 sm，再关 md 起以上
- 别用
.hidden-xs——这是 Bootstrap 3 的写法，v4/v5 中已移除，用了没效果
怎么让内容只在 PC 上出现，手机完全看不见？
推荐 .d-none .d-lg-block。注意不是 .d-md-block，因为很多平板宽度是 768–991px（属于 sm 和 md 之间），若用 md，部分横屏手机或小平板也会显示，造成误触或布局错乱。
-
.d-lg-block对应断点 ≥992px（Bootstrap 5 是 ≥992px；v4 是 ≥992px，一致） - 如果项目明确支持高分辨率 iPad（如 1024×1366），且希望它也显示 PC 版内容，可升级为
.d-xl-block（≥1200px） - 避免混用旧类如
hidden-lg：v4/v5 中该类不存在，写了等于白写 - 检查是否意外套了
container-fluid或col容器——它们本身有响应式 padding/margin，可能干扰 display 行为
为什么加了类还是没隐藏？常见失效原因
多数问题出在断点理解偏差或 CSS 优先级冲突，不是代码写错。
- 浏览器 DevTools 里看 computed 样式，确认最终生效的是
display:none还是display:block；有时自定义 CSS 里写了display:flex !important，会覆盖 Bootstrap 的d-*类 - 断点名称和实际像素不符：Bootstrap 5 的
sm是 ≥576px，不是“手机专属”；真正的竖屏手机多在 360–414px，属于xs断点（无对应d-xs-*类，xs 就是默认未加前缀的断点） - 用了
.d-sm-none却期望“只在手机隐藏”——其实它在所有 ≥576px 屏幕都隐藏，包括横屏手机和全部平板/PC，范围远超预期 - 服务端渲染（如 Next.js）中，首次加载时 JS 未就绪，但 CSS 已生效，此时断点逻辑完全由媒体查询驱动，无需担心 JS 干预
移动端只显示一张图、PC 显示三张，怎么配合网格系统做？
纯靠 d-* 类不够，得结合 col 布局控制数量和排列，否则图片会堆成一列或溢出容器。
- 结构上用同一组
<div class="row">包住所有图片项，每张图用<div class="col">包裹 - PC 端：给每张图加
col-md-4（三等分），再加d-none d-lg-block控制仅 PC 显示 - 手机端：单独放一张图，加
d-block d-md-none（仅 xs/sm 显示），其他两张用d-none d-md-block隐藏 - 别依赖
visibility或opacity模拟隐藏——屏幕阅读器仍会读取，且影响 SEO 和无障碍访问
