必须同步设置 .progress 和 .progress-bar 的 height，否则因 .progress-bar 依赖父容器高度且易被干扰而塌陷为 16px，导致裁切、圆角失效、文字偏上；还需同步调整 line-height 和 background-size 等细节。
只改 .progress 的 height 会出视觉错位，必须同步设置 .progress 和 .progress-bar 的 height 值，否则进度条被裁切、圆角变直、文字偏上。
为什么单独设 .progress 高度不行
Bootstrap 5 中 .progress-bar 默认不写死 height，它依赖父容器 .progress 的高度来撑开。但一旦有其他 CSS 干扰（比如全局重置、Flex 布局、主题样式覆盖），.progress-bar 就可能“塌”回默认的 1rem（约 16px）。结果就是：外层容器高 24px，里面进度条还是 16px，上下留白或直接被裁掉一截。
- 常见错误现象：
.progress看起来变高了，但.progress-bar还是扁的、颜色发虚、左右圆角不完整 - 使用场景：需要和按钮（如
btn-lg）、输入框对齐，或适配大屏/移动端紧凑布局 - 内联调试可行，但上线必须抽成 class —— 大量重复
style="height:24px"很难维护
怎样用 class 正确同步控制两层高度
推荐定义一个自定义 class，同时作用于外层和内部条，避免选择器权重不足或嵌套失效。
- 写法示例（CSS）：
.progress-lg { height: 24px; }<br>.progress-lg .progress-bar { height: 24px; } - HTML 中使用：
<div class="progress progress-lg"><div class="progress-bar" style="width: 65%;"></div></div> - 别漏掉外层规则：如果只写
.progress-lg .progress-bar { height: 24px; }，在响应式切换或嵌套结构里容易失效 - 用 Sass 可简写为：
.progress-lg, .progress-lg .progress-bar { height: 24px; }，但注意它不能覆盖更具体的选择器（比如带!important的第三方样式）
文字居中和动画细节不能忽略
高度变了，.progress-bar 里显示的百分比文字（如 70%）会偏上甚至被截断，因为默认靠 line-height 居中，而它没跟着变。
- 必须同步设置：
.progress-lg .progress-bar { line-height: 24px; } - 不要用
padding挤文字——会撑宽进度条，破坏百分比计算逻辑 - 如果启用了条纹动画（
bg-striped），还要检查background-size是否匹配新高度，否则条纹错位；原 keyframes 中的位移值（如background-position: 1rem 0）也得按新高度调整
最易被忽略的是：改完高度后没动 line-height，导致文字贴顶；还有人在 Sass 中重设了 $progress-height 变量，却忘了重新编译 CSS，结果页面还是旧高度。这些点不处理，看起来像“改了但没完全改”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
