.container-fluid本身宽度即100%，左右白边源于默认padding（v4为15px），需用px-0清除；高度塌缩须配min-vh-100；若嵌套在.container等限宽父容器中则被截断；使用.col时必须包裹.row以抵消内边距。
container-fluid 本身就能全屏显示，问题不在它“不能”，而在于你加了它却没看到全屏效果——大概率是 padding、height 或结构层级出了问题。
为什么加了 container-fluid 还有左右白边
Bootstrap 4 的 .container-fluid 默认带 padding-left: 15px 和 padding-right: 15px（即 px-3），不是 0。这 30px 就是白边的直接来源。
- 别手写
style="padding: 0"：破坏 RTL 兼容性，且无法复用 - 必须用
px-0类：精准清除左右内边距，保留上下 padding（适合 Banner、导航栏） - 若需真正像素级贴边（如视频背景、地图），改用
p-0 - 避免用
mx-0或my-0：它们清的是 margin，对 container 的 padding 完全无效
为什么高度塌缩、背景图只铺一小块
container-fluid 只管宽度，不管高度。内容少时，它会塌成一条线，背景色或图自然只渲染在文字那点区域里。
-
min-vh-100是首选：最小高度为视口 100%，内容多时自动延展，iOS Safari 下也稳定 -
vh-100要慎用：强制等高，但内容超长会被截断；且 iOS Safari 的vh在地址栏收放时会抖动 - 别信
height: 100%：它要求html和body都设height: 100%，漏一个就失效
为什么 container-fluid 嵌套在 container 里就失效了
container-fluid 的 “100% 宽度” 是相对于**直接父元素**计算的。如果父元素本身被限宽（比如 .container 最大宽 1170px），那子元素再 fluid 也超不出去。
立即学习“前端免费学习笔记（深入）”；
- 常见错误：
<div class="container"><div class="container-fluid px-0">...</div></div>—— 外层.container直接卡死宽度 - 检查 DevTools 的 computed width，往上逐层看
html → body → 直接父级，重点盯max-width、width和overflow - 如果页面已有固定页头/页脚，
min-vh-100要配合calc()或 flex 布局避免过度留白
为什么内部栅格列错位或溢出
即使 container-fluid px-0 min-vh-100 全写对，如果内部没包 .row，.col 仍会错位甚至溢出。
-
.row提供margin-inline: -15px，专门抵消容器的 padding，这是 Bootstrap 栅格对齐的基础机制 - 错误写法：
<div class="container-fluid px-0"><div class="col-12"></div></div> - 正确写法：
<div class="container-fluid px-0"><div class="row"><div class="col-12"></div></div></div> - 若只是单区块、不用响应式分栏，可省略
.row；但只要涉及.col，.row就不可跳过
真正容易被忽略的，是 DevTools 里 computed 样式中的 box-sizing 值——如果它变成 content-box，那 padding 就会额外撑开宽度，导致意外溢出。
