tab-pane 必须显式添加 fade 类，所有面板初始 HTML 均需包含该类，缺一则切换无过渡；默认项还需同时加 show 和 active 类，三者职责不同不可替代。
tab-pane 必须显式加 fade 类，缺一个就硬切
Bootstrap 的淡入淡出不是 JS 控制的动画，而是靠 .tab-pane.fade 触发 CSS 过渡。所有 tab-pane 元素初始 HTML 就得带 fade 类——不是只给默认项加，也不是靠 JS 动态补。漏掉任意一个，对应面板切换时就会“啪”一下跳变，毫无过渡。
- 动态插入新 tab-pane（比如 AJAX 加载后）时，JS 不会自动补
fade，必须手动加 - 用自定义构建或精简版 Bootstrap CSS 时，容易漏掉
.tab-pane.fade和.tab-pane.fade.show规则 - 检查浏览器开发者工具里，选中
tab-pane元素，看 computed 样式中是否有transition: opacity .15s ease-in-out和opacity: 0
默认激活项必须同时有 fade、show、active 三类
fade 提供过渡钩子，show 才真正让内容可见（设 opacity: 1），active 同步导航高亮。三者职责不同，不能互相替代。
- 错误写法：
className="fade active"→ 首屏空白，因为缺show，opacity仍是 0 - 正确写法（默认项）：
className="fade show active"；非默认项只需className="fade" - React Bootstrap 等封装库不会自动加
show，必须显式传入 - 别手动写
in类（Bootstrap 3 写法），v4/v5 已弃用，写了反而干扰 CSS 逻辑
缩放动画需覆盖 .tab-pane.fade 的 transform 而非仅 opacity
原生 Bootstrap 只提供淡入淡出（opacity），要加缩放效果，必须覆盖 CSS，不能依赖 JS 配置或 transition 属性。
- 保留
fade类，但重写其行为：.tab-pane.fade { opacity: 0; transform: scale(0.95); transition: opacity 0.25s ease-in-out, transform 0.25s ease-in-out; } .tab-pane.fade.show { opacity: 1; transform: scale(1); } - 避免同时叠加过多 transform + opacity 动画，可能触发额外重绘；小屏下慎用
scale(1.02)等微调，易导致文字模糊 - 如果用了 CSS-in-JS（如 Emotion），确保新规则注入顺序在 Bootstrap 原始样式之后，否则会被覆盖
- 不要在
.tab-content上设overflow: hidden，否则缩放过程可能被裁剪
响应式下高度跳变和缩略图布局要同步处理
缩略图本身不参与动画，但尺寸失控会导致 .tab-content 高度塌陷或突变，视觉上破坏淡入+缩放的连贯性。
- 给
.tab-content加min-height（如min-height: 300px），防止首屏加载时高度收缩 - 每张缩略图外层必须包
<div class="col-6 col-sm-4 col-md-3">，不能裸放<img> -
<img>必须加img-fluid，否则小屏下溢出或拉伸变形 - 避免用已移除的
.thumbnail类，它无响应逻辑且和fade动画冲突 - 移动端优先设
col-6（单行两列），平板起切col-sm-4（三列），别用col-xl-*，缩略图密度会骤降
fade，而是写了却没查 computed 样式里 transition 是否生效，或者在缩放动画里忘了关掉 .tab-content 的 overflow: hidden —— 它会把缩放过程整个裁掉。 
