Bootstrap自定义进度条高度与文字教程

在Bootstrap中自定义进度条的高度和文字，是许多前端新手容易踩坑的地方。默认的0.5rem高度虽然整齐，但一旦需要定制——比如做大号进度条或放入长文本——就会遇到圆角错位、文字偏上、字体设置无效、动画抖动等一系列问题。下面逐一梳理这些常见问题并给出解决方案。

修改.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文字却没有变大

这是Bootstrap原生规则覆盖CSS优先级的经典问题。尤其在v5.3+版本中，一些工具类引入了!important，导致直接设置font-size无效。

• 首先使用浏览器开发者工具检查是否被.progress-bar > .visually-hidden或其他嵌套规则干扰。
• 安全写法是提高选择器权重，例如：

  .progress-lg .progress-bar { font-size: 0.875rem !important; }

• 更清爽的做法是利用Bootstrap自带的字体工具类，比如
  25%
  （需确认你的版本是否支持fs-*类）。

动画过程中文字抖动或跳变的解决办法

抖动现象由transform: scaleX()动画与文字渲染机制冲突引起，在低分辨率屏幕或缩放比例非100%时尤为明显。

• 可以尝试禁用硬件加速：

  .progress-bar { transform: none; animation: progress-bar-stripes 1s linear infinite; }

  但这样会影响动画性能。
• 推荐保留transform，改用will-change: transform提前通知浏览器优化目标。
• 如果仅需静态进度条（无动画），直接移除progress-bar-animated类，抖动便会消失。

在实际项目中，最容易忽略的是line-height与容器高度的同步，以及新版Bootstrap中!important的隐式影响。记住这几点，Bootstrap进度条定制基本不会出问题。