.container-fluid全屏需三步：清父容器padding（用px-0）、设min-vh-100防塌缩、内部栅格必包.row；box-sizing非border-box会引发横向溢出。
container-fluid 本身宽度就是 100%，问题不在宽度上
加了 .container-fluid 还没全屏，90% 的情况不是它“没占满”，而是被 padding、高度塌缩或父容器截断了。它的 CSS 定义是 width: 100%，但这个 100% 是相对于直接父元素算的——如果父元素是 .container 或带 max-width 的 wrapper，那它再 fluid 也出不去。
左右有白边？先清 padding，别手写 style="padding: 0"
Bootstrap 4 的 .container-fluid 默认有 padding-right 和 padding-left 各 15px（即 px-3）。这 30px 就是白边来源。DevTools 里看 computed 样式，padding-inline-start 和 padding-inline-end 都是 15px。
- 用
px-0：安全、语义清晰、兼容 RTL 布局 - 避免
mx-0或my-0：它们清 margin，对 padding 无效 - 别在 HTML 里写
style="padding: 0"：破坏复用性，RTL 下漏掉padding-inline-start/end
高度塌缩或背景图只显一小块？必须设 min-vh-100
只靠 .container-fluid.px-0，内容少时容器会塌成一条线，背景图自然只铺在文字区域。height: 100% 在 Bootstrap 4 中基本不可靠，因为 html 和 body 默认没设高度。
-
min-vh-100：推荐首选，最小高度为视口 100%，内容多时自动延展，iOS Safari 下也稳 -
vh-100：强制等高，但内容超长会被截断，且 iOS 地址栏收放时 vh 值会抖动 - 别信
height: 100%：要生效必须同步给html和body加height: 100%，稍有遗漏就失效
内部栅格错位或溢出？.row 不可省略
即使 .container-fluid.px-0.min-vh-100 全写对，如果内部直接放 .col-12 而没包 .row，列会错位甚至横向溢出。这是 Bootstrap 栅格机制的基础设计：.row 提供负外边距（margin-inline: -15px）来抵消容器的 padding。
- 错误写法：
<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就是硬性前提
box-sizing 值——如果它变成 content-box，那 padding 就会撑开总宽度，导致横向滚动条意外出现。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
