根本原因是选择器特异性不足导致媒体查询样式被覆盖；需检查开发者工具中属性是否被划掉，优先通过父容器限定或属性选择器提升特异性，而非滥用!important，并确保CSS加载顺序正确。
为什么Bootstrap的媒体查询样式没生效
根本原因不是媒体查询写错了，而是它生成的CSS规则被其他样式“赢了”。比如你写了 @media (max-width: 768px) { .btn { padding: 4px 8px; } }，但页面上按钮实际用的是 12px 24px，说明这条规则压根没进最终计算样式——它被更高权重的选择器干掉了。
检查特异性是否被碾压
打开开发者工具 Elements 面板，选中目标元素（比如一个 .btn），看 Styles 面板里对应属性是否被划掉。如果 padding 被 strikethrough，点开左侧小箭头，展开所有匹配规则，重点找：
- 来源是
bootstrap.min.css的那条是否排在靠后位置但依然被覆盖 - 有没有更长的选择器，比如
.my-header .nav-item .btn或带属性选择器的.btn[data-test] - 有没有
!important出现在你没注意的自定义CSS里
提高权重的实操写法（不靠 !important）
Bootstrap 媒体查询里的选择器通常很短（如 .btn、.col-md-6），直接复写容易输。安全提升权重的方式有：
- 加父容器限定：
@media (max-width: 768px) { .main-content .btn { padding: 4px 8px; } } - 用属性选择器强化：
@media (max-width: 768px) { .btn[role="button"] { padding: 4px 8px; } }（前提是HTML真有role="button"） - 重复类名（谨慎）：
@media (max-width: 768px) { .btn.btn { padding: 4px 8px; } }—— 这比单个.btn权重高，但语义弱，仅限兜底 - 避免用
body .btn这种——body本身权重极低，几乎不提升总分
加载顺序和 scope 穿透问题
就算权重够了，如果CSS文件引入顺序反了，或者用了 Vue/React 的 scoped 样式，媒体查询照样失效：
立即学习“前端免费学习笔记（深入）”；
- 确认你的自定义CSS文件在
bootstrap.min.css之后 引入，否则媒体查询规则还没出场就被默认样式盖过去了 - Vue 单文件组件里写
<style scoped></style>，媒体查询内部的选择器会被自动加 data 属性，但 Bootstrap 类不会——得用:deep(.btn)穿透（Vue 3）或/deep/ .btn（旧版） - Webpack/Vite 构建时若启用了 CSS 提取插件（如 MiniCssExtractPlugin），确保媒体查询没被误拆到不同文件导致顺序错乱
真正卡住人的往往不是语法，而是权重被静默覆盖 + 文件加载时机不对——这两点不盯死，改十遍媒体查询也没用。
