Bootstrap 5 中 list-group-striped 已被移除，需手动添加 CSS 规则 .list-group-striped .list-group-item:nth-of-type(odd) { background-color: rgba(0,0,0,0.05); } 实现斑马纹，推荐用 nth-of-type 兼容动态渲染和分隔线。
list-group-striped 为什么没生效？
直接给 list-group 加上 list-group-striped 类却看不到斑马纹，大概率是因为你用的是 Bootstrap 5+ —— 这个类在 Bootstrap 5 中已被移除，不再默认支持。Bootstrap 4.3–4.6 还保留它，但依赖于 :nth-child(odd) 选择器作用于 .list-group-item，且要求列表项是 .list-group 的**直接子元素**。如果中间嵌了 <div> 或用了 v-for/ng-repeat 动态生成但没保证结构扁平，样式就会失效。
Bootstrap 5 中怎么手动加斑马纹？
最稳妥的方式是自己写一条 CSS 规则，复现原逻辑，同时避开对 DOM 结构的强依赖：
.list-group-striped .list-group-item:nth-of-type(odd) {
background-color: rgba(0, 0, 0, 0.05);
}
注意这里用 nth-of-type 而不是 nth-child，能更好兼容动态渲染或插入分隔线（如 .list-group-divider）的场景。如果你用的是 Sass，可以直接扩展 .list-group：
.list-group.list-group-striped {
.list-group-item:nth-of-type(odd) {
background-color: $list-group-bg;
}
}
其中 $list-group-bg 是 Bootstrap 5 提供的变量，默认为 rgba(0,0,0,.05)。
立即学习“前端免费学习笔记（深入）”；
使用 JavaScript 动态控制斑马纹开关是否可行？
可以，但没必要绕路操作 DOM 类名。更轻量的做法是用 CSS 自定义属性控制透明度，再用 JS 切换开关状态：
- 在根元素或
.list-group上设style="--zebra-alpha: 0.05;" - CSS 中写：
.list-group-zebra .list-group-item:nth-of-type(odd) { background-color: rgba(0,0,0,var(--zebra-alpha)); } - JS 只需
el.classList.toggle('list-group-zebra')即可启停
这样避免重复写死颜色值，也方便主题切换时统一调整。
和表格的 table-striped 行为一致吗？
不一致。表格的 table-striped 在 Bootstrap 5 中仍存在，且作用于 tbody tr；而列表的斑马纹没有官方类可用，必须手动补全。更关键的是：表格默认有 tbody 包裹，nth-child 更稳定；列表项若混入 .list-group-item.active 或其他修饰类，不影响计数，但若插了 .list-group-item.disabled，它仍参与 nth-of-type 计数 —— 这点容易被忽略，导致视觉节奏错位。
