必须同步设置 .progress 和 .progress-bar 的 height（如 24px）、.progress-bar 的 line-height（同 height）、过渡动画及颜色类，否则会出现裁切、圆角变形、文字偏位、模糊等问题。
只改 .progress 高度会裁切进度条
直接给 .progress 设 height: 24px，但没同步处理 .progress-bar，就会出现顶部/底部被截、圆角变直、颜色发虚——因为 .progress-bar 默认靠父容器撑高，但它的 CSS 没写死 height，一旦外部有其他样式干扰（比如 flex 重置、主题覆盖），它就“塌”回默认的 1rem（16px）。
常见错误写法：<div class="progress" style="height: 24px;"><div class="progress-bar" style="width: 65%;"></div></div>
这会导致内部条还是 16px 高，被 24px 的容器上下留白或裁掉。
- 必须显式设置
.progress-bar的height，且值要和.progress完全一致 - 别依赖“继承”或“自动撑开”，Bootstrap 5 的
.progress-bar不设height时行为不可控 - 用内联
style调试可以，但上线务必抽成 class，避免大量重复代码
用自定义 class 同步控制两层高度
推荐方式是定义一个新 class，同时作用于外层容器和内部条，例如：
.progress-lg {
height: 24px;
}
.progress-lg .progress-bar {
height: 24px;
}
然后在 HTML 中使用：<div class="progress progress-lg"><div class="progress-bar" style="width: 65%;"></div></div>
- 不要只写
.progress-lg .progress-bar { height: 24px; }而漏掉外层，否则响应式切换或嵌套结构下容易失效 - 如果用 Sass，可统一写：
.progress-lg, .progress-lg .progress-bar { height: 24px; }，但注意选择器权重，确保能覆盖 Bootstrap 原始规则 - 避免用
!important——它会干扰后续动态更新（比如 JS 修改width时触发重绘异常）
文字居中和 line-height 必须跟着调
高度变大后，里面显示的百分比文字（如 70%）会偏上、截断甚至模糊，因为默认靠 .progress-bar 的 line-height 居中，而它没随高度变化。
正确做法是让 line-height 等于容器高度：
.progress-lg .progress-bar {
height: 24px;
line-height: 24px;
}
- 别用
padding挤文字——会撑宽进度条，破坏 width 百分比计算逻辑 - 如果文字还模糊，检查是否用了小字号（如
font-size: 0.75rem）导致像素对齐问题，可加transform: translateZ(0)强制 GPU 渲染 - 响应式场景下（比如
@media (max-width: 768px)），记得同步调整line-height，否则移动端文字又会偏位
过渡动画和颜色类不受高度影响，但别混用旧类名
改高度本身不影响动画或颜色，但容易顺手踩两个坑：
-
.progress-bar的过渡动画由transition: width 0.6s ease控制，若想加快，覆盖成transition: width 0.2s cubic-bezier(0.34, 1.56, 0.64, 1)即可，无需动高度相关代码 - 颜色必须用
bg-*类（如bg-success）加在.progress-bar上，不是.progress；Bootstrap 5 已废弃progress-bar-success这类旧名，用了也不生效 - 自定义背景色优先用
style="background-color: #ff6b35;"，比硬套bg-*更可靠，尤其在主题覆盖强的项目里
真正麻烦的是同步——高度、line-height、动画、颜色，四者看似独立，但视觉上只要漏调一个，就立刻露馅。尤其是 line-height，最容易被忽略，一上线才发现文字悬在进度条上半截。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
