Bootstrap Tab 样式失效主因是选择器优先级不足和类名不匹配，须用 .nav-tabs .nav-link.active 等高权重选择器；fade 动画需 tab-pane 同时含 fade 和 show 类；移动端应通过 flex+overflow-x: auto 适配。
Bootstrap Tab 标签页样式改不生效？优先级和类名顺序是关键
直接加 !important 不是万能解，真正卡住的往往是 bootstrap 自带 css 的层叠顺序和类名组合逻辑。比如 .nav-tabs .nav-link.active 这个选择器权重远高于你写的 #mytab a.active —— 浏览器会按规则“谁更具体谁赢”，而不是“谁在后面谁覆盖”。
常见错误现象：写了自定义背景色，但点击后还是灰色；加了 border-bottom: 2px solid blue，结果只在 hover 时出现，active 状态没反应。
- 必须用足够具体的选择器，例如：
.nav-tabs .nav-link.active或#myTab .nav-link.active - 避免只靠
class="btn-active"这类自定义类名去控制状态——Bootstrap 的 JS 会动态加/删.active，你不跟着它走，样式就断连 - 移动端需额外处理
@media下的width和padding，否则文字挤出或按钮错位
想让当前 Tab 显示蓝底白字？别动 class，改 .nav-link.active 的 CSS
Bootstrap 5 默认用 .nav-link.active 控制激活态样式，所有 JS 切换都基于这个类。手动增删 btn-active 是绕开框架行为，容易和 shown.bs.tab 事件、键盘导航冲突。
使用场景：管理后台顶部导航栏、表单多步骤切换、内容型页面的栏目切换。
- 正确写法示例：
.nav-tabs .nav-link.active { background-color: #007bff !important; color: #fff !important; border-color: #007bff !important; } - 如果用了
nav-pills，对应改.nav-pills .nav-link.active - 注意：
!important在这里必要，因为 Bootstrap 的默认规则里.nav-link:hover和.nav-link.active权重相同，顺序靠后才生效
fade 动画加了但没效果？检查 tab-pane 是否同时有 fade 和 show
Bootstrap 5 的淡入淡出完全由 CSS 控制，JS 只负责切换 show 和 active 类。漏掉任一环节，动画就失效。
常见错误现象：点击后内容瞬间闪现、无过渡；第一个 Tab 完全空白；切换到第二个 Tab 后，前一个没自动隐藏。
- 每个
<div class="tab-pane"> 必须带 <code>fade类 - **默认激活的那个**还要额外加
show active（顺序无关，但两个都要） - 非默认项只需
fade，JS 会在切换时自动加/删show - 检查是否引入了完整的
bootstrap.min.css，缺了transition相关样式会导致fade完全不工作 - 推荐方案：
@media (max-width: 480px) { .nav-tabs { display: flex; overflow-x: auto; padding-bottom: 8px; } .nav-item { flex: 0 0 auto; margin-right: 8px; } .nav-link { white-space: nowrap; padding: 8px 16px; } } - 加
overflow-x: auto允许横向滚动，比折行更可控 - 移除
border-bottom改用box-shadow模拟下划线，避免和fade动画冲突
移动端 Tab 样式塌陷或错位？别只调宽度，得锁死 flex 行为
Bootstrap 的 .nav-tabs 在小屏下默认是 flex 布局，但子项 .nav-item 没设 flex: 1，导致文字长的项撑开、短的项缩窄，视觉不均。
容易踩的坑：用 width: 33.3% 硬分三栏，但实际 Tab 数量动态变化时立刻崩；或者只改 font-size 却忽略 padding，造成点击热区过小。
.nav-link 默认有 pointer-events: none（当它在 <li> 里时），如果你用 JS 手动触发 tab.show() 却忘了确保对应链接元素可交互，点击事件根本不会冒泡，样式也就不会更新。
