如何修改Bootstrap组件点击时的Active激活状态颜色？-Bootstrap教程-PHP中文网

直接覆盖 :active 伪类可修改按钮点击态颜色，需用 !important 或 sass 变量；导航项区分 :active（点击瞬时）和 .active（当前页状态）；下拉项需同时覆盖 :focus 和 :active；推荐用 css 变量统一控制，但需确认组件支持范围。

如何修改bootstrap组件点击时的active激活状态颜色？

Bootstrap 的按钮点击时的深色“按下去”效果，本质是 .btn:active 的背景色和边框色。它不依赖 JavaScript 状态，纯 CSS 控制，所以改起来最直接。

常见错误是只改 .btn.active（这是手动加的 class，用于 toggle 按钮）或误以为要动 :focus —— 实际上点击瞬间触发的是 :active。

在自定义 CSS 中写：

.btn:active { background-color: #2a5800 !important; border-color: #1e4200 !important; }

导航项常被混淆：点击瞬间的反馈（:active）和当前选中状态（.active class）是两回事。用户点一下就松开，看到的是前者；页面跳转后保留高亮的是后者。

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

.nav-link:active 控制点击按下的颜色，例如：
```
.nav-link:active { color: #0d6efd !important; }
```
.nav-link.active 控制“当前页”状态，比如侧边栏高亮，这个要配合 JS 或服务端模板动态加 class
如果用了 router-link-active（Vue）或 NavLink（React Router），它们默认加的 class 名可能不是 .active，得查文档确认实际 class 名再覆盖
Bootstrap 5.3+ 对 .nav-link 移除了默认 :active 样式，所以不显式写的话，点击无视觉反馈 —— 这是故意的，不是 bug

下拉菜单项点击后颜色一闪就恢复，大概率不是没写 :active，而是 :focus 样式抢了表现权。Bootstrap 默认给 .dropdown-item:focus 设了 outline 和背景，且 focus 状态在点击后仍存在（尤其键盘操作后）。

优先覆盖 .dropdown-item:focus，而不仅是 :active：

.dropdown-item:focus, .dropdown-item:active { background-color: #e9ecef !important; }

如果禁用 focus outline，别只写 outline: none，还要补 box-shadow: none，否则 Bootstrap 5 默认用 shadow 模拟 focus ring
移动端真机测试很重要：Android Chrome 有时会把点击事件映射成 focus，iOS 则可能延迟触发 focus，导致颜色切换不同步

如果你改的不只是几个组件，而是想整个项目里所有 :active 行为都一致（比如全用主题蓝），Bootstrap 5.2+ 支持用 CSS 变量接管部分交互色，比满屏 !important 更可持续。

Bootstrap 定义了 --bs-btn-active-bg、--bs-dropdown-link-active-bg 等变量，可在 :root 中重设：
```
:root { --bs-btn-active-bg: #0a3d62; --bs-dropdown-link-active-bg: #f0f4f8; }
```
不是所有组件都响应这些变量（比如 .nav-link 就没用 --bs-nav-link-active-color），得翻源码确认支持范围
变量方案对 IE 完全无效，如果还要兼容，得 fallback 到传统选择器覆盖
开发时容易漏掉一个细节：这些变量只影响“有 active 状态的组件”，像 .form-control:focus 用的是 --bs-form-control-focus-border-color，得另配