应使用.d-none .d-md-block .d-lg-none组合：先全局隐藏，再在≥768px（md）显示，最后在≥992px（lg）再次隐藏，从而仅在平板宽度区间（768–991px）内显示元素。
Bootstrap 5 怎么只在平板端显示元素
Bootstrap 5 没有专门针对“平板”的独立断点类，它只定义了 xs、sm、md、lg、xl、xxl 这六档响应式断点，其中 md（≥768px）通常被当作平板起始宽度，但注意：这个值覆盖的是「平板横屏 + 小桌面」，不是纯平板专属。
所以，所谓“只在平板显示”，实际得靠组合隐藏类来逼近——即：仅在 md 和 lg 断点生效，其他断点全部隐藏。
-
md起始于 768px（常见平板竖屏最小宽度） -
lg起始于 992px（常见平板横屏或小笔记本宽度） -
xl（≥1200px）已属桌面，需显式隐藏 -
sm（≥576px）和xs（
正确写法：用 d-md-block d-lg-block d-xl-none d-xxl-none d-sm-none d-none
这是最贴近“仅平板”语义的 class 组合。它表示：仅在 md 和 lg 断点显示为块级元素，其余全部不显示（d-none 是 xs 默认隐藏，d-sm-none 关闭小屏，d-xl-none 及以上关闭桌面）。
<div class="d-none d-sm-none d-md-block d-lg-block d-xl-none d-xxl-none"> 只在平板（约 768px–1199px）可见 </div>
注意顺序：Bootstrap 的 display 工具类是“最后生效优先”，所以把 d-none 放前面、更具体的断点放后面，才能确保覆盖逻辑正确。如果颠倒顺序（比如 d-md-block d-none），d-none 会覆盖所有断点，元素永远不显示。
为什么不用 d-md-inline 或 d-table？
因为显示行为要和你的内容语义匹配。如果模块是段落或容器， CSS 媒体查询无法识别设备类型，只能读取视口宽度。很多 iPad 竖屏是 768×1024，但 Chrome 桌面模拟器设成 768×1024 也会触发——这意味着“平板显示”本质是“特定宽度区间显示”，而非设备判断。 如果你的应用必须区分 iPad（比如调用 PWA 安装提示），就得用 JavaScript 检测 真正容易被忽略的点是：iPad Safari 在「分屏模式」下视口宽度可能落到 d-md-block 最稳妥；如果想内联排版，可用 d-md-inline，但要注意父容器是否允许内联元素撑宽。另外，d-table 类在 md 下会让元素表现如 ，容易引发盒模型意外（比如默认居中、换行异常），非必要不推荐。
d-flex 和 d-md-block —— 同一元素上 display 值冲突，后者会失效position: absolute，display 类可能不生效，需检查计算样式d-xxl-none，需确认你用的是 v5.3+ 版本真·平板检测？别依赖 CSS 断点
navigator.userAgent 或 matchMedia 配合 platform，但这类做法不稳定、易被 UA 伪造，且违反响应式设计原则。绝大多数场景，老实用 md/lg 区间 + 显式隐藏更可靠。sm（比如 560px），此时你的“平板专属模块”就消失了——这不是 bug，是响应式本意。如果业务强依赖设备类型，得接受这种不确定性，或后端 UA 判断 + 服务端渲染兜底。
