Bootstrap 4：如何通过媒体查询修改标题字体大小？解决样式覆盖问题

这问题我日常开发里碰到过好多次，核心原因就是CSS选择器优先级冲突或者样式加载顺序不对——Bootstrap 4对<h1>、<h2>这类标题的样式定义，优先级比你写的基础标签选择器更高，所以你的样式被浏览器忽略（划掉）了；而<p>标签Bootstrap的默认样式没那么强的优先级，所以你的修改能正常生效。

下面给你几个靠谱的解决办法，按推荐程度排序：

1. 调整样式文件加载顺序（最简单的第一步） #

确保你的自定义CSS文件在Bootstrap的CSS文件之后引入，因为CSS中同优先级的选择器，后面加载的样式会覆盖前面的。比如：

<!-- 先加载Bootstrap -->
<link rel="stylesheet" href="path/to/bootstrap.min.css">
<!-- 再加载你的自定义样式 -->
<link rel="stylesheet" href="path/to/your-styles.css">

如果之前你的自定义样式在Bootstrap前面，调整顺序后很多时候就能解决问题。

2. 提高选择器优先级（最常用的解决方案） #

如果加载顺序调整后还是不行，就需要提升你自定义样式的选择器优先级。比如：

• 给标题添加自定义类，用类选择器代替标签选择器：

/* 自定义标题类 */
.page-title {
  font-size: 15px;
  padding-bottom: 0;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  color: #E85A4F;
}

.section-title {
  font-size: 17.5px;
}

/* 媒体查询也对应修改 */
@media only screen and (min-width: 576px){
  .page-title {
    font-size: 20px;
    padding-top: 25px;
  }
}

然后在HTML里给标题加上类：<h1 class="page-title">...</h1>

• 或者用更具体的父元素选择器（比如结合body或容器类）：

body h1 {
  font-size: 15px;
  padding-bottom: 0;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  color: #E85A4F;
}

body h2 {
  font-size: 17.5px;
}

@media only screen and (min-width: 576px){
  body h1 {
    font-size: 20px;
    padding-top: 25px;
  }
}

3. 用Bootstrap的变量自定义（最规范的做法） #

如果你项目用的是Bootstrap 4的Sass版本，直接修改标题的变量是最符合Bootstrap设计逻辑的方式，不需要写覆盖样式：

// 先导入Bootstrap的变量文件
@import "bootstrap/scss/_variables";

// 覆盖标题字号变量（单位可以用rem，更适配响应式）
$h1-font-size: 0.9375rem; // 对应15px
$h2-font-size: 1.09375rem; // 对应17.5px

// 媒体查询的变量也可以自定义，或者直接写在变量里
$h1-font-size-md: 1.25rem; // 对应20px

// 最后导入Bootstrap核心文件
@import "bootstrap/scss/bootstrap";

这样编译出来的Bootstrap CSS就会直接用你设置的字号，不需要额外写自定义样式。

为什么段落p的修改能正常生效？ #

因为Bootstrap对<p>的默认样式只有边距设置：

p {
  margin-top: 0;
  margin-bottom: 1rem;
}

它没有给<p>设置固定的font-size，默认是继承父元素的字号，所以你写的p { font-size:15px; }优先级足够覆盖继承的样式，自然能生效。

内容的提问来源于stack exchange，提问作者jrajak10