在Bootstrap中如何自定义进度条的高度和文字

修改 .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 中的隐式影响。