必须同步设置 .progress 和 .progress-bar 的 height，否则会导致裁切、圆角失效、文字偏上；因 .progress-bar 依赖父容器高度撑开，若仅设外层高度，内层可能塌回默认 1rem，造成视觉错位与样式异常。
必须同步设置 .progress 和 .progress-bar 的 height，只改其中一层会导致裁切、圆角失效、文字偏上——这不是 bug，是 bootstrap 5 的设计逻辑。
为什么只设 .progress 高度会出问题
Bootstrap 5 中 .progress-bar 默认不写死 height，它依赖父容器 .progress 的高度来撑开。但一旦有全局重置、Flex 布局干扰或第三方主题覆盖，.progress-bar 就可能“塌”回默认的 1rem（约 16px）。结果就是：外层高 24px，里面条还是 16px，上下留白或直接被裁掉一截。
- 常见错误现象：
.progress看起来变高了，但.progress-bar还是扁的、颜色发虚、左右圆角不完整 - 内联调试可行：
<div class="progress" style="height:24px;"><div class="progress-bar" style="height:24px;width:65%;"></div></div>，但上线必须抽成 class - 别用
!important—— 它会干扰 JS 动态更新width时的重绘逻辑
用自定义 class 同步控制两层高度
推荐定义一个新 class，同时作用于外层和内部条，避免选择器权重不足或嵌套失效。
- 正确写法：
.progress-lg { height: 24px; }<br>.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; }，但注意它不能覆盖带!important的第三方样式
line-height 和 background-size 必须跟着调
高度变了，.progress-bar 里显示的百分比文字（如 70%）会偏上甚至被截断，因为默认靠 line-height 居中，而它没跟着变。
- 必须同步设置：
.progress-lg .progress-bar { line-height: 24px; } - 别用
padding挤文字——会撑宽进度条，破坏百分比计算逻辑 - 如果启用了条纹动画（
bg-striped），还要检查background-size是否匹配新高度；原 keyframes 中的位移值（如background-position: 1rem 0）也得按新高度调整 - 最易被忽略的是：改完高度后没动
line-height，导致文字贴顶；还有人在 Sass 中重设了$progress-height变量，却忘了重新编译 CSS，结果页面还是旧高度
真正麻烦的不是改高度本身，而是所有依赖高度的细节都要联动调整——line-height、border-radius、box-shadow、条纹动画位移值，甚至 aria 属性的视觉对齐。漏掉任意一项，都会让进度条看起来“差点意思”。
