如何修改Bootstrap 4中list-group-flush列表的分割线颜色

解决方法 #

你用的是Bootstrap的list-group-flush列表组件，默认分割线是针对浅色场景设计的，深色背景下对比度不足才会看不清，直接通过自定义CSS修改边框颜色即可： #

方案1：直接覆盖默认样式

针对flush类型的列表组单独修改，不会影响普通列表组的样式：

.list-group.list-group-flush .list-group-item {
    /* 替换为适配你深色背景的高对比度颜色，比如偏浅的灰色 */
    border-color: #4a4a4a;
}

/* 可选：修改选中/hover状态的分割线颜色 */
.list-group.list-group-flush .list-group-item.active {
    border-color: #666666;
}
.list-group.list-group-flush .list-group-item:hover {
    border-color: #555555;
}

方案2：Bootstrap 5+ 变量覆盖（更推荐）

如果你用的是Bootstrap 5及以上版本，可以直接覆盖框架原生的CSS变量，更符合自定义规范：

/* 可以写在全局，或者你的深色容器的样式类里 */
:root {
    --bs-list-group-border-color: #4a4a4a;
}

调整颜色的时候建议保证分割线和背景的对比度不低于3:1，适配视力障碍用户的浏览需求。

内容的提问来源于stack exchange，提问作者editid