怎样自定义Bootstrap 5的Progress进度条高度_设置.progress类的CSS高度

作者：袖梨 2026-06-06

.progress 和 .progress-bar 高度必须同步设置，否则会导致裁切、圆角错位或文字偏移；还需同步调整 line-height 和 background-size，并避免使用已移除的 Bootstrap 4 类名。

.progress 类的高度必须显式设置，且仅设这一层不够——.progress-bar 的高度也得同步匹配，否则会出现裁切、留白或圆角错位。

为什么只改 `.progress` 高度会出问题

Bootstrap 5 默认把 .progress 设为 height: 1rem（约 16px），而 .progress-bar 内部默认继承该高度，但它的样式规则里没写死 height，全靠父容器撑开。一旦你只改 .progress 的 height，比如设成 24px，.progress-bar 却可能因其他 CSS（如重置、主题覆盖、flex 布局干扰）没同步撑高，结果就是进度条被顶部/底部裁掉一截，或者边缘圆角变直、阴影消失。

常见错误现象：.progress 看起来变高了，但 .progress-bar 还是扁的、颜色发虚、左右圆角不完整
使用场景：需要适配大屏表单、移动端紧凑布局、或与按钮/输入框等高对齐时
性能影响：纯 CSS height 修改无渲染开销，但若用 JS 动态批量修改大量进度条高度，建议用 class 切换而非内联 style

正确做法：两层 height 同步控制

最稳妥的方式是同时作用于外层容器和内部条——要么用内联 style，要么用自定义 class。不要依赖“只设父容器就能自动继承”的假设。

内联写法（适合单次、快速调试）：

<div class="progress" style="height: 24px;">  <div class="progress-bar" style="height: 24px; width: 65%;"></div></div>

推荐 class 写法（可复用、易维护）：
```
.progress-lg { height: 24px; }.progress-lg .progress-bar { height: 24px; }
```
然后在 HTML 中用 <div class="progress progress-lg">...</div>
如果用 Sass，可统一重写：.progress, .progress-bar { height: 24px; }，但注意别漏掉嵌套结构中的 .progress-bar

文字居中和响应式要额外处理

高度变了，里面显示百分比的文字（比如 <span>75%</span>）容易偏上、截断或模糊——因为默认靠 line-height 居中，而它没跟着变。

立即学习“前端免费学习笔记（深入）”；

文字垂直居中必须加：.progress-lg .progress-bar { line-height: 24px; }，值严格等于容器高度
避免用 padding-top 或 margin 挤文字，会破坏宽度百分比计算逻辑（width: 75% 是相对于 .progress 宽度的）

响应式需求下，别只写一个固定高度；例如在小屏上想缩到 16px，就得加媒体查询：

@media (max-width: 768px) {  .progress-lg { height: 16px; }  .progress-lg .progress-bar { height: 16px; line-height: 16px; }}

别踩这些坑

很多人卡在这几步，不是不会写 CSS，而是没意识到 Bootstrap 的隐含约束。

.progress-bar 上直接写 font-size 会覆盖文字大小，但不解决居中问题；必须配 line-height
用 bg-* 类改颜色时，确保加在 .progress-bar 上，而不是 .progress 外层——后者无效
自定义高度后，如果用了 .progress-bar-striped，条纹密度可能错位；需同步调整 background-size（比如原为 1rem 1rem，现在高度是 24px，就该改成 24px 24px）
别用 Bootstrap 4 的 .progress-sm / .progress-lg 类名，Bootstrap 5 已移除，写了也没效果