根本原因是 Bootstrap 5 中 .tab-pane 默认受 .fade 和 .show 控制，大屏下 Tab JS 移除非激活项的 .show 导致内容消失；需同时加 d-lg-block 和 .show（或弃用 .fade）并确保 .tab-content 无溢出裁剪。
为什么 .tab-pane 在大屏下内容突然消失
根本原因是 Bootstrap 5 的 .tab-pane 默认受 .fade 和 .show 控制：未激活时由 .tab-content > .tab-pane { display: none; } 隐藏；激活后才加 .show 显示。小屏下这没问题，但切换到 ≥992px（lg 断点）时，Tab JS 会主动移除非当前项的 .show 类——导致你本想在桌面端常驻显示的文案（比如「Text」面板）也被清空。
用 d-lg-block 强制大屏可见，但别漏掉 .show
最轻量的解法是给目标 .tab-pane 同时加 d-lg-block 和 .show：
<div class="tab-pane fade show d-lg-block" id="text"> <p>这段文字应在小屏走标签页，大屏直接显示</p> </div>
-
d-lg-block覆盖了display: none，让元素在 ≥992px 时强制块级渲染 - 但仅靠它不够：如果 Tab JS 已移除了
.show，而该元素还带.fade，就会触发opacity: 0，内容仍不可见 - 所以必须显式保留
.show，或干脆去掉.fade改用d-block d-lg-block彻底绕过过渡逻辑
避免 .tab-content 容器本身溢出裁剪
如果 .tab-content 父容器加了 overflow-hidden 或固定高度，可能导致大屏下内容被意外截断。常见于卡片内嵌标签页场景：
- 检查
.tab-content是否被包裹在.card或.modal-body中，且这些父容器设了height或max-height - 若需滚动，请对
.tab-content加overflow-auto，而非对.tab-pane单独加——后者在响应式切换中极易失效 - 确保
.tab-content的父级有明确高度传递链，例如.card.d-flex.flex-column+.tab-content.flex-fill
移动端切回桌面端时状态残留怎么办
用户在小屏下切换过 Tab，再放大窗口，JS 可能已清理掉所有 .show，此时仅靠 d-lg-block 不足以恢复显示。更鲁棒的做法是：
立即学习“前端免费学习笔记（深入）”；
- 为该面板设置唯一 ID（如
id="text"），并在页面加载后用一行 JS 补上.show：document.getElementById('text')?.classList.add('show') - 或改用纯 CSS 方案：移除
.fade，直接用tab-pane d-block d-lg-block，放弃淡入动画换取确定性 - 注意不要混用
d-none d-lg-block——它和.fade的display冲突，会导致小屏也不显示
真正麻烦的不是加类，而是忘记 .show 和 .fade 的耦合关系。一旦用了 .fade，就等于把显示控制权交给了 JS；想绕开它，就得彻底弃用 .fade。
