使用 .container-fluid 是最直接的全宽容器方案，它使容器宽度始终为 100vw、左右贴边，适用于导航栏、轮播等需横跨视口的场景，但需配合 min-vh-100 等高度类才能真正全屏。
用 .container-fluid 是最直接的全宽容器方案
bootstrap 官方提供的 .container-fluid 类就是干这个的：让容器宽度始终为 100vw，左右贴边，不居中、不留白。它不依赖父元素高度或宽度，也不需要额外写 css —— 只要加在 <div> 上就行。
- 适用于顶部导航栏、全屏轮播、背景色区块等需要横跨整个视口的场景
- 注意它只管宽度，高度仍需手动设（比如加
h-100或min-vh-100） - 别和
.container混用——后者有固定断点宽度（如 576px / 768px），加了就破功
为什么 width: 100% 常常不管用？
因为 width: 100% 是相对于父容器计算的，而 Bootstrap 默认的 .container 或 <body> 往往没占满视口。常见现象是：你写了 width: 100%，但实际只撑到 .container 的最大宽度（比如 1140px），两边还是留白。
- 根源在 HTML 结构层级：如果父级是
.container，子级再怎么width: 100%也超不出它的边界 - 检查浏览器开发者工具里该元素的 computed width，大概率会看到它卡在某个固定 px 值上
- 真正想“撑满屏幕”，得跳出父容器限制，要么用
.container-fluid，要么用position: absolute+left: 0; right: 0;
全屏容器必须配合高度控制才真正“全屏”
只设宽度为 100% 远不够——页面内容少时，容器会塌缩成一条线，根本看不出“全屏”。必须显式定义高度行为。
- 最常用的是
min-vh-100（最小视口高度 100%），内容少时撑满，内容多时自动延展 - 若要求严格等高（比如登录页背景图必须填满整个窗口），改用
vh-100，但注意内容溢出时会被截断 - 别信
height: 100%：它依赖所有祖先元素都有明确高度，html和body必须先设height: 100%，否则无效
容易被忽略的两个破坏性坑
即使用了 .container-fluid 和 vh-100，也可能被其他规则悄悄覆盖。
-
overflow: hidden在父级（比如body或某个 wrapper）上会导致内容被裁剪，尤其视频背景或浮动元素 -
padding或margin写在容器内部元素上，会撑开容器造成横向滚动条——用box-sizing: border-box（Bootstrap 默认已设）可缓解，但外边距仍需自查
真要一劳永逸，打开 DevTools 看 computed 样式，盯住 width、height、box-sizing 和 overflow 四个值，比猜强得多。
