Bootstrap5响应式标签页兼容方法

下的每个 .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>

? 更优实践：避免内容重复，提升可维护性

原方案中表格内容被复制两次（