必须同时设置 .progress 和 .progress-bar 的 height；仅改前者会导致后者塌陷为默认1rem，引发留白、裁切或变细；正确做法是用自定义class同步控制两层高度，并显式设置 border-radius: 0、line-height 与 height 一致，避免内联样式和 !important。
必须同时设置 .progress 和 .progress-bar 的 height
只改 .progress 高度，.progress-bar 会塌回默认的 1rem（约 16px），导致上下留白、被裁切，或视觉上变细。这是因为 .progress-bar 默认不声明 height，靠父容器“撑开”，但一旦有 Flex 重置、第三方 CSS 覆盖或浏览器渲染差异，它就失效。
- 正确做法：用自定义 class 同步控制两层高度，例如
.progress-lg { height: 24px; }+.progress-lg .progress-bar { height: 24px; } - 避免内联写法长期使用：
<div class="progress" style="height:24px;"><div class="progress-bar" style="width:65%;height:24px;"></div></div>—— 容易重复、难维护、JS 动态更新时可能出错 - 别用
!important强制 height：会干扰.progress-bar的 width 动画重绘逻辑，尤其在 JS 驱动进度变化时出现跳帧或卡顿
.progress-bar 的圆角必须显式设 border-radius: 0，不能靠 rounded-0
rounded-0 类对 .progress-bar 基本无效——Bootstrap 原生样式中 .progress-bar 的圆角是直接写死的 border-radius: 0.375rem，且选择器权重远高于工具类。给外层 .progress 加 rounded-0 更没用，因为圆角根本不在它身上。
- 安全写法：在自定义 class 中直接写
.progress-lg .progress-bar { border-radius: 0; } - 若只改单个条，可内联：
style="border-radius: 0;"加在.progress-bar元素上（不是.progress） - 不要给
.progress设border-radius或任何圆角类——它只是容器，不参与视觉渲染
文字偏位、发虚？同步调 line-height 和边框
移除圆角 + 增高后，文字常贴顶、模糊或边缘发虚，这不是 bug，是高度、行高、像素渲染联动的结果。原默认 line-height: 1 是按 1rem 高度设计的，现在变成 24px 就完全不匹配。
- 必须加：
.progress-lg .progress-bar { line-height: 24px; }（值需与 height 一致） - 启用条纹动画（
bg-striped）时，检查background-size是否仍为1rem 1rem；新高度下建议设为24px 24px - 颜色“发虚”可加浅灰边框强化轮廓：
border: 1px solid #e9ecef; - 严禁用
padding挤文字位置——会撑宽.progress-bar宽度，破坏百分比计算逻辑
全局改所有进度条？别碰 $border-radius 变量
改 Sass 变量 $border-radius 不会影响 .progress-bar 的圆角——它的圆角是硬编码在 _progress.scss 里的，和全局变量无关。想批量调整，唯一可靠方式是覆盖组件级样式。
- 推荐写一个统一前缀类，如
.progress-flat，集中定义 height / border-radius / line-height / border - 如果项目已用 Sass 构建，可在自定义入口文件里加：
.progress-flat, .progress-flat .progress-bar { height: 20px; border-radius: 0; line-height: 20px; } - 注意：Bootstrap 5.3+ 仍未将进度条圆角接入 CSS 变量体系，所以无法用
style="--bs-progress-border-radius: 0;"控制
