直接给 <li> 添加 active 类即可实现激活态，Bootstrap 5 要求 active 必须加在 <li> 上（链接式需配合 list-group-item-action），且不可遗漏 list-group-item 基础类；Bootstrap 3 允许直接加在 <a> 上，升级时需调整结构。
怎么给 list-group 里的某一项加激活态
直接给对应 <li> 加 active 类就行，bootstrap 会自动渲染高亮样式。不需要 js 干预，纯 css 控制。
常见错误是加错位置：比如给 <a> 加了 active，但外层 <li> 没加——Bootstrap 5 要求 active 必须在 <li> 上（除非用的是 list-group-item-action 链接变体）。
- 正确写法：
<li class="list-group-item active">Home</li> - 链接式写法：
<li><a href="#" class="list-group-item list-group-item-action active">Profile</a></li> - 别漏掉
list-group-item基础类，否则active样式不生效
active 类在不同 Bootstrap 版本中的行为差异
Bootstrap 4 和 5 行为基本一致，但 Bootstrap 3 不一样：它允许直接给 <a> 加 active，且不强制包裹 <li>。升级时容易漏改结构，导致激活态消失。
另外，active 是静态类，不会随路由变化自动切换——如果要做 SPA 导航高亮，得配合框架（如 Vue Router 的 router-link-active 或 React Router 的 useMatch）手动同步。
- Bootstrap 3 支持：
<a class="list-group-item active">... - Bootstrap 4/5 要求：
<li class="list-group-item active"><a>...</a></li>或<li><a class="list-group-item list-group-item-action active">...</a></li> - 没加
list-group-item-action时，<a>默认无 hover/focus 样式，点了也不像按钮
为什么点击后 active 状态不保留
因为 active 是静态类，页面刷新或跳转后不会自动维持。浏览器不会记住你点过谁，除非你用 JS 手动设置、或服务端渲染时根据当前路径注入。
典型场景：用 <a href="/settings"> 跳转后，新页面的列表组里“Settings”项没高亮——那是因为新 HTML 里根本没写 active 类。
- 服务端方案：模板里判断
request.path == '/settings'，然后给对应项加active - 前端 SPA 方案：监听路由变化，用
document.querySelector找到匹配href的项，再加类（注意移除旧的） - 别用
:focus或:hover代替active，它们不是持久状态
自定义激活态样式时容易忽略的点
如果覆盖了默认的 .list-group-item.active，要注意优先级和伪类继承。比如想改背景色，光写 .list-group-item.active { background: #007bff; } 可能被原生样式顶掉，尤其用了 Sass 编译或 CDN 引入顺序不对时。
更麻烦的是文字颜色：默认激活项文字是白色，但如果只改背景没调文字色，可能在暗色主题下看不清。
- 推荐用
!important快速验证（上线前应改用更高优先级选择器） - 检查是否同时设置了
.list-group-item.active:hover，否则鼠标悬停时会退回默认蓝灰 - 如果用了
list-group-item-action，还要覆盖.list-group-item-action.active:focus，不然键盘 tab 到它时焦点框错位
active，而是忘了它不联动路由、不跨页面、不响应交互——所有“自动”效果都得自己补。 
