只改 .progress 高度会出问题，因为 .progress-bar 默认无 height，依赖父容器撑开；若被重置或覆盖，会塌回 16px，导致上下留白、圆角变直、文字截断等视觉错位。
为什么只改 .progress 高度会出问题
Bootstrap 5 的 .progress-bar 默认不设 height，全靠父容器 .progress 的高度来撑开。但一旦有 CSS 重置、Flex 布局干扰或第三方主题覆盖，.progress-bar 就可能塌回默认的 1rem（约 16px）。结果就是：外层高 24px，里面条还是 16px，上下留白、圆角变直、颜色发虚，甚至文字被截断。
必须同步设置 .progress 和 .progress-bar 的 height
只设一层高度，99% 的场景都会出视觉错位。正确做法是用同一个 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，在嵌套结构或响应式切换时容易失效。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
别忘了同步调 line-height 和 background-size
高度变了，文字就不再垂直居中。默认靠 line-height 居中，所以必须显式设置：
-
.progress-lg .progress-bar { line-height: 24px; }（值严格等于容器高度） - 避免用
padding挤文字——会撑宽进度条，破坏width: 65%的计算逻辑 - 如果启用了条纹动画（
.progress-bar-striped），还要检查background-size是否匹配新高度；原@keyframes中的background-position: 1rem 0也得按比例调整
内联 style 调试可行，但上线必须抽成 class
快速验证可以写：<div class="progress" style="height:24px;"><div class="progress-bar" style="height:24px;width:65%;"></div></div>。但上线千万别用 !important 或内联样式控制高度——它会干扰 JS 动态更新 width 时的重绘逻辑，尤其在批量渲染进度条时容易卡顿或跳帧。
真正麻烦的不是改高度本身，而是所有依赖高度的细节：文字偏移、圆角裁切、条纹节奏、aria 属性语义对齐……漏掉任意一项，用户看到的就是“看起来差不多，但总有点不对劲”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
