.container-fluid宽度本为100%，问题根源在于默认内边距、高度塌缩及父容器截断；需用px-0清除左右padding、min-vh-100设最小高度，并确保栅格结构含.row以抵消内边距。
.container-fluid 本身宽度就是 100%，所谓“调整它的 CSS 宽度”多数时候是误判问题根源——你真正遇到的，是它没贴边、没撑高、或被父级截断。
为什么加了 .container-fluid 还不是全屏？
常见现象：左右有白边、高度塌缩、内容只占半屏。根本原因不是宽度不够，而是三类干扰同时存在：
-
.container-fluid默认带padding-left和padding-right（v5 是1.5rem，v4 是15px），不手动清掉就永远不贴边 - 它只管宽度，不管高度；
height: 100%在大多数 HTML 结构里无效，因为html和body没设高度 - 如果它嵌套在
.container、max-width父容器或带margin/padding的body里，宽度立刻被截断
清除内边距必须用 px-0，别手写 padding: 0
直接写 style="padding: 0" 或自定义 class 配 padding: 0 !important 看似快，但会破坏 RTL（从右向左）布局兼容性，且难以复用。Bootstrap 内置的间距工具类才是安全解法：
- 加
px-0：精准清除左右内边距，保留上下 padding（适合 Banner、导航栏） - 加
p-0：全方向清空（适合真正需要像素级贴边的地图容器、视频背景） - 避免
mx-0或my-0：它们清的是 margin，对 container 的 padding 无效
高度必须显式声明，min-vh-100 比 vh-100 更稳妥
只靠 .container-fluid.px-0，页面内容少时容器会塌成一条线。必须配合高度控制：
-
min-vh-100：最小高度为视口 100%，内容多时自动延展，iOS Safari 下也稳定 -
vh-100：强制等高，但内容超长会被截断，且 iOS Safari 的vh在地址栏收放时会抖动 - 别信
height: 100%：它要求html和body都设height: 100%，稍有遗漏就失效
结构错位比样式错位更难排查
最常被忽略的一点：即使 .container-fluid.px-0.min-vh-100 全部写对，如果内部没包 .row，栅格列仍会错位甚至溢出：
-
.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；但只要涉及响应式分栏，.row就不可跳过
真正容易被忽略的，是浏览器 DevTools 里 computed 样式中的 box-sizing 值——如果它变成 content-box，那 padding 就会额外撑宽，导致横向滚动条意外出现。盯住 width、padding、box-sizing 和 overflow 这四个值，比猜强得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
