@media样式无法影响Jumbotron标题，响应式布局问题求助

首先直接回应你的疑问：是的，Bootstrap的display-4类自带了媒体查询的字体大小规则，它的优先级会盖过你自定义的样式，这是字体不生效的核心原因之一。另外背景图裁切也有对应的解决方法，我一步步帮你梳理：

1. 修复字体大小不生效的问题 #

你的代码里有两个关键问题：

• 自定义CSS用了#headerh1选择器，但HTML里的<h1>并没有这个id，根本匹配不上；
• Bootstrap的display-*类（比如display-4）有内置的响应式字体规则，优先级比普通选择器高。

解决方法： #

修改你的媒体查询代码，用更精准的选择器来覆盖Bootstrap的样式，比如：

@media (max-width: 400px) {
  /* 精准匹配jumbotron下的display-4标题 */
  .jumbotron h1.display-4 {
    font-size: 2em;
    /* 如果还是不生效，可以临时加!important（尽量少用，优先优化选择器） */
    /* font-size: 2em !important; */
  }
}

另外，也可以考虑去掉display-4类，自己用相对单位（比如rem）定义字体大小，这样更灵活：

<h1><i class="fa fas fa-star"></i> Hello, World!<i class="fa fas fa-star fa-1x"></i></h1>

h1 {
  font-size: 3.5rem; /* 对应display-4的默认大小 */
}
@media (max-width: 400px) {
  h1 {
    font-size: 2rem;
  }
}

2. 修复背景图随机裁切的问题 #

Bootstrap的jumbotron默认没有对背景图做适配，你需要给.bgimg类添加背景图的适配属性：

.bgimg {
  background-image: url('你的背景图地址'); /* 替换成你的图路径 */
  background-size: cover; /* 保持比例覆盖容器，不会拉伸变形 */
  background-position: center center; /* 小屏时居中显示，减少裁切 */
  background-repeat: no-repeat;
  min-height: 300px; /* 给一个最小高度，避免内容撑不起容器 */
}

如果希望背景图完全显示不裁切，可以把background-size: cover改成background-size: contain，但可能会出现留白，根据你的需求选择即可。

3. 额外的响应式优化建议 #

• 给.jumbotron在小屏时减少内边距，让布局更紧凑：

@media (max-width: 400px) {
  .jumbotron {
    padding: 1rem 1rem; /* 默认是2rem 1rem，小屏缩小padding */
  }
}

• 按钮的大小也可以在小屏调整，比如用btn-sm类，或者自定义样式：

@media (max-width: 400px) {
  .btn-primary {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
  }
}

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