小屏下进度条仍有渐变色是因为 background-image 未被媒体查询覆盖；需在 @media (max-width: 575.98px) 中显式设 .progress-bar { background-image: none !important; background-color: #007bff !important; }，并同步处理行高、字体及条纹类。
为什么 form-inline 在小屏下仍有渐变色？
Bootstrap 4 的 .progress-bar 默认使用 background-image: linear-gradient(...) 渲染，这个样式在所有断点下都生效，和 form-inline 无关——你可能混淆了组件：进度条（.progress）和表单内联（.form-inline）是两个完全独立的系统。如果你看到小屏下进度条还有渐变，那是因为渐变规则本身没被条件覆盖，不是响应式类自动处理的。
如何用媒体查询在 sm 断点禁用渐变？
必须显式覆盖 .progress-bar 的 background-image，并在 @media (max-width: 575.98px) 内设为 none 或纯色背景。注意两点：一是不能只写 background-color，它会被默认的 background-image 遮住；二是 !important 在媒体查询里仍需保留，否则原生样式权重更高。
推荐写法：
@media (max-width: 575.98px) {
.progress-bar {
background-image: none !important;
background-color: #007bff !important;
}
}
- 若项目中用了自定义进度条类（如
.progress-primary），请同步覆盖该类下的.progress-bar - 若同时启用了条纹（
.progress-bar-striped），需额外在媒体查询中覆盖：.progress-bar-striped { background-image: none !important; } - 不要试图用
background: #007bff一揽子重置——它会意外清除background-size和background-position，导致动画错位
取消渐变后文字对齐突然偏移？
渐变移除后，.progress-bar 的 height 未变，但内部渲染层减少，可能放大像素级渲染差异。尤其当高度不是整数像素（如 1.25rem）时，文字容易发虚或贴顶。
必须同步调整：
- 显式声明
height和line-height相等，例如都设为16px或1rem - 检查是否残留
font-size缩放逻辑（如父容器用了transform: scale(0.9)） - 避免在媒体查询中仅改背景却不重置行高——这是小屏下文字“飘起来”的最常见原因
更干净的解法：用 CSS 自定义属性控制渐变开关
如果项目中多处需要条件切换渐变，硬写媒体查询易遗漏。可改用 CSS 变量 + :root 声明，再配合媒体查询切换变量值：
:root {
--progress-bar-bg: linear-gradient(to right, #007bff, #0056b3);
}
@media (max-width: 575.98px) {
:root {
--progress-bar-bg: #007bff;
}
}
.progress-bar {
background-image: var(--progress-bar-bg) !important;
}
这种写法的好处是：一处修改，全局生效；变量名语义清晰；后续加 md 或 lg 断点只需追加媒体查询块，不用重复写选择器。
真正容易被忽略的是：CSS 变量不支持 IE，且 !important 必须保留在 background-image 赋值处——变量本身不带权重，不加 !important 仍会被 Bootstrap 原生样式压住。
