Bootstrap5响应式标签页兼容方法

✅ 核心解法：利用响应式工具类覆盖默认行为

最简洁、可靠且无需 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>

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

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