.container-fluid 默认有15px左右内边距，需用px-0清除；若仍不贴边，检查父元素是否限宽或存在干扰样式；全宽还需配合min-vh-100控制高度，并正确设置background-size等背景属性。
container-fluid 为什么没贴边？先看默认 padding
Bootstrap 5 的 .container-fluid 默认带 padding-left 和 padding-right 各 15px（即 px-3），不是 0。这 30px 就是左右“留白”的直接来源，尤其在深色背景或全屏 Banner 下特别明显。
它不报错、不警告，只是安静地缩进——你用 DevTools 看 computed 样式，padding-inline-start 和 padding-inline-end 都是 15px。
- 别用
style="padding: 0"写 HTML 里：难维护，且 RTL 布局下会漏掉padding-inline-start/end - 优先用 Bootstrap 自带的
px-0类：语义清晰、兼容性好、一行解决 - 如果要复用或跨组件统一处理，写自定义类如
.full-bleed { padding-inline: 0 !important; }，!important是因为 Bootstrap 工具类优先级高
为什么加了 px-0 还是没撑满？查父元素有没有限宽
.container-fluid 的宽度是 100%，但这个“100%”是相对于它的**直接父元素**计算的。如果父元素本身有 max-width、width 或 padding，那它再怎么 fluid 也超不出去。
常见干扰源：
-
或被其他 CSS 加了max-width或margin（比如某些重置样式残留body { margin: 8px; }） - 外层包了个
<div class="container">，然后把 <code>.container-fluid塞进去——这是典型嵌套错误，.container的断点宽度直接卡死子元素 - 用了
position: relative或overflow: hidden的父容器，间接影响子元素渲染边界 - 用
min-vh-100：推荐首选，内容少时撑满视口，内容多时自动延伸，适配滚动场景 - 避免
h-100：它依赖所有祖先元素都有明确高度，html和body必须先设height: 100%，否则无效且难排查 - iOS Safari 对
vh有地址栏收放抖动问题，可加降级：min-height: 100%+min-height: 100vh（后者覆盖前者） -
background-size: cover：等比缩放填满，但可能裁剪边缘；适合大图氛围背景 -
background-size: contain：等比缩放完整显示，但四周可能留白；适合 Logo 或需保留全部信息的小图 - 慎用
background-attachment: fixed：它会让背景脱离文档流，在响应式容器中极易错位，iOS 上常失效 - 确保图片尺寸足够大（至少 1920×1080），否则
cover会模糊
打开 DevTools，从 .container-fluid 往上逐层看 computed width 和 box-sizing，重点盯住 html → body → 直接父级这三个节点。
全宽 ≠ 全屏：高度不设，背景图永远铺不满
只加 .container-fluid.px-0 只解决了宽度问题。如果里面内容少，容器高度就塌成一条线，背景图只显示在文字那一小块区域里。
必须显式控制高度行为：
注意：min-vh-100 应加在 .container-fluid 上，而不是它的子元素（如 .row）。加在 .row 上容易被栅格 gap 干扰高度计算。
背景图铺不满？别怪 container-fluid，先看 background-size 和 attachment
即使宽度高度都对了，背景图仍可能居中偏移、拉伸变形或固定不动——问题通常不在容器，而在背景渲染规则本身。
最后检查路径是否正确、是否有同名类名冲突（比如自定义 CSS 里写了 .container-fluid { background: none; } 却忘了删），这些细节比逻辑更常导致“明明代码对却没效果”。
