必须同步设置 .progress 和 .progress-bar 的 height，否则会导致裁切、圆角失效、文字偏上；颜色类（如 bg-success）必须加在 .progress-bar 上才生效，底色由 .progress 控制，且需同步调整 line-height 和 background-size。
直接改 .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），导致视觉错位。
- 只改
.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，否则无障碍支持失效
最易被忽略的是：改了高度却没调 line-height，或者用了 bg-* 类但加错了元素层级；还有人改了 CSS 变量却忘了确保自定义样式加载在 Bootstrap CSS 之后。
