如何在Bootstrap 5中自定义CSS加载条的颜色和高度？-css教程-PHP中文网

必须同步设置 .progress 和 .progress-bar 的 height，否则会导致裁切、圆角失效、文字偏上；颜色类（如 bg-success）必须加在 .progress-bar 上才生效，底色由 .progress 控制，且需同步调整 line-height 和 background-size。

如何在bootstrap 5中自定义css加载条的颜色和高度？

直接改 .progress 和 .progress-bar 的 CSS 就能生效，但必须同步控制两层高度、颜色作用位置要准，否则进度条会裁切、文字偏移或颜色不显。

进度条颜色为什么加在 `.progress-bar` 上才有效

Bootstrap 5 已弃用 .progress-bar-success 这类旧类名，所有颜色类（如 bg-success、bg-warning）必须加在 .progress-bar 元素上，写在外层 .progress 容器上完全无效。

bg-primary、bg-info、bg-danger 等都只对 .progress-bar 生效
若需自定义色（比如 #ff6b35），直接用 style="background-color: #ff6b35;" 更可靠——bg-* 类可能被主题重置或 CSS 权重覆盖
底色（即背景轨道）由外层 .progress 的 background-color 控制，不是 .progress-bar 的事

为什么必须同时设置 `.progress` 和 `.progress-bar` 的 height

.progress-bar 默认不设固定 height，它依赖父容器 .progress 的高度撑开。但一旦有其他样式干扰（比如全局重置、Flex 布局、第三方主题），它就会塌回默认的 1rem（约 16px），导致视觉错位。

CSS

CSS 官方网站入口。访问 W3C 的 CSS 页面，查看 CSS 标准、学习资料与工作组动态；CSS 是 Web 标准，无需下载安装。

下载

只改 .progress 高度 → .progress-bar 被裁切、圆角变直、文字贴顶
只改 .progress-bar 高度 → 外层留白、进度条悬浮在空容器里
推荐写法：.progress-lg { height: 24px; } + .progress-lg .progress-bar { height: 24px; line-height: 24px; }
别漏掉 line-height：高度变了，文字默认靠 line-height 居中，不调就会偏上甚至被截

条纹动画和深色模式下要注意什么

启用 .progress-bar-striped 后，新高度会破坏原条纹背景的位移节奏；深色模式下，硬编码的颜色值也容易对比失衡。

background-size 和 background-position 得按新高度重算，例如原 background-position: 1rem 0 应改为 background-position: 24px 0
用 CSS 变量定义颜色更稳妥，比如 --bs-progress-bg: #e9ecef;，并在 @media (prefers-color-scheme: dark) 中重设
如果项目已大量使用 bg-info，别直接覆盖该类——新建语义类（如 .bg-indigo-600）更安全
动态更新进度时，记得同步更新 aria-valuenow，否则无障碍支持失效