本文详解如何在 Bootstrap 5 中实现「小屏用标签页、大屏自动展开」的响应式布局，解决 .tab-pane 在 ≥992px 视口下因 fade/show 类切换导致内容意外隐藏的问题，并提供零 JS 依赖的纯 CSS 类解决方案。
本文详解如何在 bootstrap 5 中实现「小屏用标签页、大屏自动展开」的响应式布局，解决 `.tab-pane` 在 ≥992px 视口下因 `fade`/`show` 类切换导致内容意外隐藏的问题，并提供零 js 依赖的纯 css 类解决方案。
在 Bootstrap 5 中，
下的每个 .tab-pane 默认受 .fade 和条件性 .show 控制：未激活时 display: none（由 .tab-content > .tab-pane { display: none; } 定义），激活后才添加 .show 并过渡显示。这一机制在移动端（d-lg-none）下工作良好，但当用户从小屏切换至大屏（≥992px）时，Bootstrap 的 JavaScript 会移除 .show 类以维持“仅当前 Tab 可见”的语义——这导致原本应常驻显示的文本内容（如右侧主区域文案）在桌面端也消失，违背响应式设计初衷。
✅ 核心解法：利用响应式工具类覆盖默认行为
最简洁、可靠且无需 JavaScript 干预的方案，是为大屏下的非标签内容显式添加 d-lg-block，强制其在 ≥992px 时始终可见，同时保留小屏下的标签逻辑：
<div class="tab-pane fade show tab-container d-lg-block" id="text"> <p>Lorem ipsum dolor sit amet...</p> </div>
d-lg-block 会覆盖 .tab-pane 的 display: none，使该面板在大屏下无视 .fade 和 .show 状态，始终以块级元素渲染。注意：d-lg-block 必须放在 tab-pane 后续位置（CSS 层叠优先级），且不可与 d-none d-lg-block 混用在同一元素上（避免冲突）。
⚠️ 进阶注意事项：避免状态残留引发的显示异常
若用户在小屏下切换过 Tab（例如点击了「Table」再切回「Text」），随后扩大窗口，Bootstrap 的 Tab JS 可能已移除 #text 的 .show 类，此时仅靠 d-lg-block 不足以保证内容可见——因为 .fade:not(.show) 仍会设置 opacity: 0。因此，强烈建议补充 d-lg-block 并确保该面板始终携带 .show 类（或使用 d-block d-lg-block 彻底绕过 fade 逻辑）：
<!-- 推荐：双重保障，兼顾 display 与 opacity --> <div class="tab-pane fade show d-block d-lg-block" id="text"> <p>Your desktop-friendly content here.</p> </div>
? 更优实践：避免内容重复，提升可维护性
原方案中表格内容被复制两次（
<div class="col ps-md-4">
<!-- 大屏：独立展示文本 -->
<div class="d-none d-lg-block">
<p>Lorem ipsum dolor sit amet...</p>
</div>
<!-- 小屏：标签页结构 -->
<div class="d-lg-none">
<ul class="nav nav-tabs mt-5">
<li class="nav-item"><a class="nav-link active" href="#table" data-bs-toggle="tab">Table</a></li>
<li class="nav-item"><a class="nav-link" href="#text" data-bs-toggle="tab">Text</a></li>
</ul>
</div>
<div class="tab-content">
<div class="d-lg-none tab-pane fade show active" id="table">
<!-- 表格副本（必要时保留） -->
</div>
<div class="tab-pane fade show d-block d-lg-block" id="text">
<!-- 文本副本（或保持与上方 d-lg-block 内容一致） -->
</div>
</div>
</div>✅ 总结
- 根本原因：Bootstrap 5 的 .tab-pane 依赖 JS 控制 .show 类，而该类在视口变化时被动态移除，导致大屏下内容不可见。
- 首选方案：为需常驻显示的 .tab-pane 添加 d-block d-lg-block，覆盖 display: none 和 opacity: 0。
- 最佳实践：分离大屏直出内容与小屏 Tab 内容，减少冗余；若必须复用，确保关键面板具备响应式可见性兜底。
- 验证要点：在浏览器中反复缩放窗口（尤其 991px ↔ 992px 边界），检查所有内容是否无缝切换、无闪动或丢失。
此方案完全基于 Bootstrap 5 官方工具类，零自定义 CSS/JS，兼容性强，适用于所有标准响应式 Tab 场景。
