bootstrap默认不为.nav-link.active加底边框，仅通过颜色、粗细或背景变化表达激活态；需用.nav-item.active .nav-link选择器，显式设置border-bottom-width/style/color，并确保css在bootstrap.min.css之后加载。
因为 .active 类本身不带任何样式，它只是个标记；你必须自己写 CSS 规则让它生效。
为什么加了 class="nav-link active" 却没高亮？
Bootstrap 5 的 .nav-link.active 默认只加粗文字、微调颜色，但不加底边框、不改背景色（除非你用的是深色主题或特定变体）。很多人以为加了类就自动变色，结果发现毫无反应。
- 检查浏览器开发者工具，确认元素上确实存在
active类，且没被display: none或visibility: hidden干扰 - 确认你的自定义 CSS 在 Bootstrap CSS 之后 加载，否则会被覆盖
- 别只写
.nav-link.active { border-bottom: 2px solid #0d6efd; }，要显式重置所有边框属性，避免继承干扰：border-bottom-width: 2px; border-bottom-style: solid; border-bottom-color: #0d6efd; - 如果用了 Vue/React，检查 class 绑定是否正确，比如 Vue 中应为
:class="{ 'active': isActive }"，不是硬写class="active"
为什么 .btn.active 背景色改不了？
.btn.active 和 :active 是两回事：前者是“当前选中态”，后者是“鼠标按下瞬间”。想让按钮点击后保持颜色，必须操作 .btn.active，但它的样式容易被覆盖。
- Bootstrap 默认的
.btn-primary.active权重不够，常被后续加载的 CSS 压住，得写更具体的选择器，例如：.btn.btn-primary.active - 别漏掉
:focus状态组合——键盘用户按空格触发时会走:active:focus，漏掉会导致颜色回退 - 如果按钮有
disabled属性，.active类会被降级（透明度降低、指针禁用），看起来像“没变色” - 移动端要注意：iOS Safari 默认忽略
:active，但.active类不受影响；不过如果你依赖data-bs-toggle="button"，得确保 JS 正常执行
为什么表格行加 bg-success 没反应？
不是类没加成功，而是 Bootstrap 表格强制用 CSS 变量 --bs-table-bg 覆盖了所有子元素背景色。哪怕 DOM 里明明白白写着 bg-success，也会被 .table > tbody > tr 的继承背景压掉。
- 根本解法是在自定义 CSS 中重置变量：
.table { --bs-table-bg: transparent; }（注意不能写none，那是无效值） - 改完后，原有 jQuery 添加
bg-success的逻辑就能直接生效，无需改 JS - 如果只用
!important强盖background-color，可能在响应式断点或深色模式下失效，变量方案更稳定
最常被忽略的一点：active 类是否生效，和 HTML 里有没有写对 class 名无关，而取决于你有没有为那个 class 写出对应、有效、优先级足够的 CSS 规则——而且得在正确的作用域里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
