Bootstrap设置header全页宽度container-fluid无效的解决方法

container-fluid是Bootstrap原生的全宽响应式容器类，默认会占满父元素100%宽度，当前设置无效的核心原因是全局body样式写了width: 98%，父容器本身没有占满视口宽度，子元素自然无法实现全宽展示。

不需要改动HTML结构，仅调整CSS即可，修复后完全保留Bootstrap原生响应式特性：

• 修正body的宽度设置，同时重置浏览器默认边距，避免出现边距空隙和横向滚动条：

body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  padding-top: 60px;
  width: 100%; /* 将原有的98%修改为100% */
  margin: 0; /* 清除浏览器默认给body加的8px外边距 */
  overflow-x: hidden; /* 避免子元素溢出产生横向滚动条 */
  font-family: "Raleway", sans-serif;
}

• 给header和banner容器补充宽度兜底规则，避免被其他全局样式影响：

header {
  height: 100vh;
  width: 100%;
  margin: 0;
  padding: 0;
}

#banner {
  position: relative;
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("logo");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
  width: 100%;
  max-width: 100%;
}

• 额外注意：你给banner元素加的自定义类名写的是baner（正确拼写应为banner），如果后续编写对应自定义样式要注意拼写一致，避免样式失效。

修改完成后header区域会自动适配所有屏幕尺寸占满整个视口宽度，Bootstrap自带的响应式逻辑完全保留，不需要额外编写多套媒体查询做适配。

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