全屏背景容器不能直接用.container，因其默认带margin: 0 auto和固定最大宽度（如1140px），无法撑满视口；正确做法是外层用.container-fluid设背景，内层嵌套.container约束内容宽度。
全屏背景容器为什么不能直接用 .container
因为 .container 默认带左右 margin: 0 auto 和固定最大宽度（如 1140px），它不会撑满视口，背景色或图自然也就只能覆盖到容器自身范围。你想让背景“全屏”，但内容又“居中限宽”，本质是需要两个嵌套结构：外层负责全宽+背景，内层负责约束内容宽度。
正确做法：用 .container-fluid 包裹 .container
Bootstrap 提供了 .container-fluid（100% 宽度、无 padding）作为外层容器，它可安全设背景；再在其内部放标准 .container（自动居中、带响应式断点宽度），内容就自然被限制在中间区域。这是最轻量、语义清晰、且不破坏 Bootstrap 响应逻辑的方式。
常见错误是给 .container 直接加 width: 100vw 或 position: relative 后强行拉伸——这会破坏断点计算、导致水平滚动条、或在小屏上溢出。
-
.container-fluid必须作为最外层直接子元素（比如放在下或紧贴主布局 wrapper），否则可能受父级padding或overflow干扰 - 如果页面有固定页头/页脚，
.container-fluid的min-height: 100vh要谨慎加——避免在内容少时出现过度留白 - 背景图建议用
background-size: cover+background-position: center，防止拉伸变形
需要兼容 IE10/11？别用 vw 单位模拟全宽
有些方案试图绕过 .container-fluid，改用 .container { width: 100vw; max-width: 1140px; }。这在 Chrome/Firefox 可行，但在 IE10/11 中 100vw 会包含滚动条宽度，导致容器比视口还宽，触发隐藏的水平滚动条——用户会莫名看到右边缘有一道空白或滚动抖动。
更稳妥的做法仍是分层：.container-fluid 确保物理全宽，.container 专注内容约束。Bootstrap 4/5 的 .container 本身已通过 max-width + margin 实现响应式限宽，无需 hack。
自定义断点下如何保持内容居中对齐
如果你改过 Bootstrap 的 $grid-breakpoints（比如新增 xxl），要确认 .container 在对应断点的 max-width 值是否同步更新。否则可能出现：大屏下内容突然变窄、或居中偏移。
检查方式很简单：在浏览器开发者工具里选中 .container 元素，看 computed 样式中的 max-width 是否符合预期（例如 xxl 对应 1320px）。若不符，需重新编译 CSS 或手动补全局样式：
@include media-breakpoint-up(xxl) {
.container {
max-width: 1320px;
}
}
实际项目中，这个细节最容易被忽略——开发时用默认断点一切正常，上线后换设备一测，大屏用户反馈“右边空了一大块”，往往就是这里没对齐。
