必须同时设置 .progress 和 .progress-bar 的 height 并单独为 .progress-bar 设 border-radius: 0；仅设外层高度会导致内部条塌陷至默认 1rem 而被裁切或留白，且 rounded-0 类因权重不足常失效。
必须同时改 .progress 和 .progress-bar 的 height，且圆角要单独作用于 .progress-bar 并设 border-radius: 0；只动外层或依赖 rounded-0 类会失效。
为什么只设 .progress 高度会裁切或变细
Bootstrap 5 中 .progress-bar 默认不写死 height，它靠父容器 .progress 的高度“撑开”。但一旦有 Flex 布局干扰、CSS 重置或第三方主题覆盖，.progress-bar 就可能塌回默认的 1rem（约 16px）。结果就是：外层高 24px，里面条还是 16px，上下留白或直接被裁掉一截。
- 常见错误写法：
- 内联调试可行，但上线必须抽成 class，避免重复和权重问题
- 别用
!important——它会干扰 JS 动态更新width时的重绘逻辑
怎么安全同步设置高度和直角圆角
最稳妥的方式是定义一个自定义 class，同时控制外层容器和内部条的高度与圆角。不能只靠 rounded-0，因为该工具类对 .progress-bar 的生效依赖于选择器权重和无覆盖规则，而 Bootstrap 原生样式优先级高，容易失效。
- 推荐 CSS 写法：
.progress-lg { height: 24px; }<br>.progress-lg .progress-bar { height: 24px; border-radius: 0; } - HTML 中使用：
- 如果只改个别进度条，可用内联：
style="height:24px;border-radius:0;"直接加在.progress-bar上 - 不要给
.progress加rounded-0——它的圆角来自.progress-bar自身，外层没圆角可清
改完高度和圆角后文字偏上或发虚怎么办
这不是 bug，是高度、line-height、边缘渲染联动导致的视觉偏差。移除圆角后像素过渡变硬，若再不调 line-height，文字就会贴顶甚至被截断；高度变大后，原 1rem 的默认 line-height 也不再匹配。
- 必须同步设置：
.progress-lg .progress-bar { line-height: 24px; } - 如果启用了条纹动画（
bg-striped），还要检查background-size和background-position是否适配新高度 - 若颜色看起来“发虚”，可加一层浅灰边框：
border: 1px solid #e9ecef;强化轮廓 - 别用
padding挤文字——会撑宽进度条，破坏百分比计算逻辑
真正麻烦的不是改高度或圆角本身，而是所有依赖高度的细节都要联动调整：从 height、border-radius 到 line-height、background-size，甚至动画关键帧里的位移值。漏掉任意一项，都可能在某个浏览器或特定缩放比例下暴露异常。
