容器本身不支持全屏背景扩展，正确做法是用外层 wrapper 承担背景并撑满视口，.container 仅负责内容宽度约束；需注意父级高度、移动端 vh 异常及 background 居中兼容性问题。
Container 容器本身不支持全屏背景扩展
Bootstrap 的 .container 默认带左右 padding 和 max-width 限制，它本质是内容容器，不是背景载体。想让它“撑满全屏并显示背景”，实际是混淆了语义：背景该由父级（比如 或专用 wrapper）承担，.container 只负责约束内容宽度。
正确做法：用 wrapper 包裹 container 并设背景
把背景色/图放到 .container 外层元素上，再用 CSS 控制该 wrapper 撑满视口。常见结构如下：
<div class="bg-fullscreen">
<div class="container">
<!-- 内容 -->
</div>
</div>
对应样式：
-
.bg-fullscreen需设width: 100vw或width: 100%+margin-left: calc(-50vw + 50%)（防滚动条偏移），更稳妥的是用position: relative+left: 50%+transform: translateX(-50%) - 若用
background-image，记得加background-size: cover和background-position: center - 避免在
.container上直接设width: 100%—— 这会破坏 Bootstrap 响应式断点逻辑，导致小屏下内容过宽
遇到 background 不铺满？检查这几个地方
常见失效原因不是写法错，而是被隐性规则覆盖：
-
body或html缺少height: 100%，导致父级高度塌陷，背景无处可展 -
.container的 margin/padding 被继承或重置，间接影响 wrapper 高度计算 - 使用
container-fluid时误以为它能“自动撑背景”——其实它只是去掉 max-width，仍受 padding 和父容器限制 - Flex/Grid 父容器未设
min-height: 100vh，导致子元素 height: 100% 失效
移动端适配时容易漏掉的细节
iOS Safari 和部分 Android 浏览器对 vh 单位处理异常（地址栏收放时值会变），直接用 height: 100vh 做全屏背景可能忽高忽低：
- 优先用
min-height: 100vh而非height: 100vh - 对关键背景区域加
@supports (height: -webkit-fill-available)回退到height: -webkit-fill-available - 如果背景图必须精确居中，
background-attachment: fixed在 iOS 上不生效，得改用伪元素 +position: fixed
真正要动的是 wrapper，不是 container；背景和布局容器职责必须分开，否则越调越乱。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
