如何用CSS调整Bootstrap列表组的边框样式？-css教程-PHP中文网

直接改 .list-group-item 的 border 需用 !important 覆盖 bootstrap 默认的分段边框逻辑（.list-group 顶边框 + :not(:last-child) 下边框），否则无效；统一虚线圆角需同时重置 .list-group 顶边框、.list-group-item 四边边框及圆角，并处理 active 状态样式。

如何用css调整bootstrap列表组的边框样式？

直接改 .list-group-item 的 border 就行，但必须覆盖 Bootstrap 的默认权重和重置逻辑，否则无效。

为什么直接写 `border: 1px solid red` 没反应？

Bootstrap 5+ 默认给 .list-group-item 设了 border-bottom: 1px solid rgba(0,0,0,.125)（仅下边框），且用 :not(:last-child) 控制；顶部边框由 .list-group 自身的 border-top 提供。单纯加 border 会触发浏览器合并——你设的四边边框会被它的局部边框规则覆盖。

实操建议：

优先用 .list-group-item 的 border + !important 强制覆盖（简单场景够用）
更稳妥的方式是同时重置 .list-group 的 border-top 和所有 .list-group-item 的 border-bottom
若要保留圆角，别忘了同步调整 border-radius，否则新边框会“撑出”直角

想统一改成虚线边框 + 圆角，怎么写 CSS？

这是高频需求，关键在于打破 Bootstrap 的分段边框逻辑，把控制权收回来：

.list-group {
  border-top: none; /* 干掉顶部边框 */
}
.list-group-item {
  border: 1px dashed #6c757d !important;
  border-radius: 8px;
}
/* 可选：去掉 item 之间的间隙（默认有 margin-bottom） */
.list-group-item:not(:last-child) {
  margin-bottom: 0;
}

注意：!important 在这里不是偷懒，而是因为 Bootstrap 的 CSS 是从 node_modules 注入的，其选择器权重常高于你的自定义样式。不加容易被忽略。