bootstrap 5 的 css 媒体查询被原生样式覆盖，通常是因为浏览器加载样式的优先级顺序或选择器特异性（specificity）导致的。如果自定义样式写在 bootstrap 核心文件之后，且没有使用更高的特异性或 !important，浏览器会优先应用后加载的样式。要解决这个问题，需要确保自定义样式表在 bootstrap 之后引入，并通过增加选择器层级或使用 !important 来强制提升优先级。
如何调整样式表的引入顺序以解决冲突
将自定义 CSS 文件放在 Bootstrap 的 标签之后，是解决此类问题的第一步。浏览器按代码出现的顺序解析样式，后出现的规则会覆盖先出现的同名规则。例如，如果 Bootstrap 设置了 .card { background: white; }，而你的自定义文件在后面定义了相同的类，那么自定义背景色就会生效。若仍被覆盖，说明 Bootstrap 使用了更复杂的组合选择器，此时需检查 HTML 结构并相应地增加自定义选择器的层级。
<meta charset="UTF-8"><title>Bootstrap Override Test</title><!-- 1. 先引入 Bootstrap CSS --><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"><!-- 2. 后引入自定义 CSS --><link href="custom.css" rel="stylesheet"><div class="container">
<div class="card p-4">
<p>This text should be red.</p>
</div>
</div>
预期结果：当 custom.css 中包含 .card p { color: red; } 时，段落文字会显示为红色。如果 custom.css 放在 Bootstrap 之前，则文字保持 Bootstrap 默认的黑色。
如何通过提高选择器特异性来覆盖 Bootstrap 默认值
当引入顺序正确但仍被覆盖时，是因为 Bootstrap 的选择器特异性更高。可以通过给元素添加父级 ID 或增加类名数量来提高特异性。例如，Bootstrap 的 .btn-primary 特异性较低，若要在不修改源码的情况下覆盖它，可以在自定义 CSS 中使用 #my-container .btn-primary 这样的选择器。这种方法比使用 !important 更推荐，因为它保持了样式的可维护性。
/* custom.css */
/* 低特异性：可能被 Bootstrap 覆盖 */
.btn-primary {
background-color: blue;
}
/* 高特异性：成功覆盖 Bootstrap 默认值 */
#app-wrapper .btn-primary {
background-color: green !important;
}
预期结果：带有 btn-primary 类的按钮背景色变为绿色。如果不加 !important 且特异性不足，颜色可能仍为 Bootstrap 默认的蓝色。
为什么特定断点下的媒体查询失效
在 Bootstrap 5 中，媒体查询是基于最小宽度（min-width）构建的。如果在自定义媒体查询中使用了不同的断点值，或者在 Bootstrap 的断点之后重新定义了相同属性的样式，可能会导致样式失效。例如，Bootstrap 在 @media (min-width: 768px) 下设置了 .col-md-6 的宽度，如果你在自定义文件中在 @media (min-width: 992px) 下再次设置该类的宽度，可能会破坏原有的网格布局。应始终参考 Bootstrap 的官方断点文档，确保自定义媒体查询与框架保持一致。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
