该用container-fluid当内容需贴边无留白，如后台主布局、数据看板、全屏轮播页、嵌入式iframe；普通文章页、产品页、表单页则应选container以保可读性与呼吸感。
什么时候该用 container-fluid 而不是 container
全屏容器不是“更高级”的选择，而是明确服务于「内容必须贴边、无左右留白」的场景。比如后台管理系统的主布局、数据看板、全屏轮播页、嵌入式 iframe 容器——这些地方若用默认 container，会在屏幕两侧留下固定 padding（通常是 15px），导致内容缩进、图表被裁切或视觉重心偏移。
反例也很典型：普通文章页、产品介绍页、表单页——它们需要呼吸感和可读性，container 的 max-width + 水平居中才是合理选择。
container-fluid 在不同断点下的实际表现
它本身不设 max-width，但会继承 Bootstrap 的 gutter（列间距）规则。这意味着：container-fluid 内部的 row 仍带 -15px margin，子 col 带 15px padding，整体仍保持栅格对齐逻辑——只是容器宽度拉满。
常见误区是以为用了 container-fluid 就能无视断点。其实不然：如果你在 col-md-6 里放一个宽 100% 的图表，小屏下它仍会挤占整行；而你若希望小屏时图表变窄、留出操作区，就得配合 col-sm-8 col-lg-6 这类响应式类，不能只靠容器。
- 桌面端（≥992px）：
container-fluid宽度 = viewport 宽度 − scrollbar 宽度（浏览器差异） - 移动端 Safari：可能因地址栏收起/展开导致 viewport 宽度跳变，
container-fluid会实时响应，但内部绝对定位元素容易错位 - 打印样式表中：它不会自动收缩，需额外加
@media print { .container-fluid { width: 100%; } }
和自定义 CSS 全宽方案比，container-fluid 有什么不可替代性
它不是简单设 width: 100%，而是与 Bootstrap 栅格系统深度耦合：自动处理负 margin / padding 抵消、支持 gutters 配置（如 gx-0 去除水平间距）、兼容 container-sm 等变体。手动写 class="w-100" 或 style="margin: 0; width: 100%;" 很容易破坏 row-col 对齐，尤其嵌套多层时。
真正需要手写 CSS 的情况反而更少：比如要让某个区块“视觉上全宽”，但内容区仍保持 1200px 居中（常见于带背景色的 section），这时应该用 container-fluid 包一层，里面再套 container，而不是废掉整个栅格体系。
容易被忽略的兼容性细节
Bootstrap 5+ 默认启用 RTL 支持，container-fluid 在 RTL 模式下会自动翻转 padding 和 margin 方向；如果你项目没开 RTL，但引入了 Bootstrap 的完整 CSS（含 RTL 规则），它不会出错，但会多加载约 12KB 未使用样式。
另一个坑是和第三方库混用：比如集成 Chart.js 时，若 canvas 父容器是 container-fluid，但没设明确 height，某些版本的 Chart.js 会因父容器高度为 auto 而渲染失败——此时需给 canvas 显式设 style="height: 400px;" 或用 h-100 类配合 d-flex 布局。
最常被跳过的一步：检查是否误删了 viewport meta 标签。没有 <meta name="viewport" content="width=device-width, initial-scale=1">，container-fluid 在移动端根本不会按视口宽度计算，而是回退到 layout viewport（通常 980px），全屏就成空谈。
