修改 .progress 容器高度应作用于外层，如用 .progress-lg { height: 1rem; }；文字垂直居中需同步设置 .progress-bar 的 line-height 等于容器高度，并用 !important 或高权重选择器解决 font-size 覆盖问题。
如何修改 .progress 容器高度
Bootstrap 默认进度条高度固定为 0.5rem（v5.x），直接改 height 就行，但必须作用在 .progress 这个外层容器上，而不是内部的 .progress-bar —— 后者设高会导致圆角错位、阴影异常。
- 推荐用自定义类覆盖，比如加
class="progress-lg"，再写 CSS：.progress-lg { height: 1rem; } - 如果用 Sass，可重设
$progress-height变量后重新编译，但仅影响全局；局部调整仍建议类名方式 - 注意响应式断点下若需不同高度，得配合媒体查询，例如
@media (max-width: 768px) { .progress-lg { height: 0.75rem; } }
怎样让文字垂直居中且不溢出
默认文字是通过 .progress-bar 的 font-size 和 line-height 模拟居中，但一旦改了外层高度，line-height 不同步就会偏上或截断。
- 最稳做法：给
.progress-bar显式设置line-height等于父容器.progress的高度，例如.progress-lg .progress-bar { line-height: 1rem; } - 避免用
padding挤文字——会撑宽进度条，破坏百分比计算逻辑 - 文字过长时默认会省略（
text-overflow: ellipsis），如需换行，得加white-space: normal+ 固定height，但务必测试动画是否卡顿
为什么加了 font-size 文字却没变大
常见原因是 CSS 优先级被 Bootstrap 原生规则覆盖，尤其 v5.3+ 引入了 !important 在部分工具类中，导致直接写 font-size 失效。
- 检查浏览器开发者工具，看是否被
.progress-bar > .visually-hidden或其他嵌套规则干扰 - 稳妥写法是提高选择器权重，例如：
.progress-lg .progress-bar { font-size: 0.875rem !important; } - 更干净的做法是用 Bootstrap 的字体工具类组合，比如
<div class="progress-bar fs-sm">25%</div>（需确认版本支持fs-*类）
动画过程中文字抖动或跳变
这是由 transform: scaleX() 动画和文字渲染机制冲突导致的，尤其在低分辨率屏或缩放非 100% 时明显。
- 禁用硬件加速可能缓解：
.progress-bar { transform: none; animation: progress-bar-stripes 1s linear infinite; }，但会损失动画性能 - 更推荐保留
transform，改用will-change: transform提前告知浏览器优化目标 - 如果只是静态进度条（无动画），直接删掉
progress-bar-animated类，抖动立刻消失
实际项目里最容易漏的是 line-height 与容器高度的同步，以及 !important 在新版 Bootstrap 中的隐式影响。
