container-fluid 是 bootstrap 5 中实现 100% 视口宽度的唯一原生方案，需配合 px-0 消除内边距、min-vh-100 确保最小高度，三者缺一不可。
用 container-fluid 是最直接有效的方案
Bootstrap 5 中唯一原生支持 100% 视口宽度的容器类就是 container-fluid。它不设 max-width，直接声明 width: 100vw，左右紧贴视口边缘，无需额外 CSS。
常见错误是把 container 和 container-fluid 混用，比如在 container 内再套一层 container-fluid——后者仍受限于父级的固定宽度，根本撑不开。
-
container-fluid必须作为最外层容器或至少是“无宽度约束父级”的直系子元素 - 它默认带
padding-left和padding-right各15px（即--bs-gutter-x的一半），若要真正贴边，得加px-0 - 内部若使用
.row+.col，px-0不会影响栅格逻辑；但若没套.row，直接放.col会因缺少负 margin 抵消而错位
为什么 width: 100% 大概率失效
因为 width: 100% 是相对于父容器计算的，而 Bootstrap 默认的 body 或上层 container 往往本身就没占满视口。你在开发者工具里看到的 computed width 卡在 1140px 或 1320px，根源就在这里。
别试图给 div 加 style="width: 100%" 硬撑——只要父级是 container，它就永远超不出那个断点最大宽度。
- 检查路径：右键 → “检查”，看该元素的
Computed标签页里的width值，不是看Styles里你写了什么 -
container-fluid是脱离这个链条的唯一标准解；position: absolute; left: 0; right: 0是野路子，会破坏文档流，慎用 - 如果项目已用 CDN 引入编译版 CSS，就别想着改
$container-max-widths变量——那需要 Sass 编译环境
高度也要同步处理，否则“全宽”只是假象
只设宽度为 100% 远不够。内容少时，容器高度塌缩成一条线，视觉上根本看不出全屏效果。
必须显式控制高度行为：
- 用
min-vh-100：最小高度为整个视口，内容多时自动撑开，最常用也最安全 - 用
vh-100：严格等高，适合登录页背景图等场景，但内容溢出会被截断 - 别信
height: 100%：它要求html和body都先设height: 100%，且所有祖先元素都不能是auto高度，极易断裂
大屏（如 2K）下想更宽？别硬调 container
默认 container 在 xxl（≥1400px）断点下最大只到 1320px，2K 屏（2560px）下留白明显。这时强行覆盖 CSS 媒体查询风险高——容易让 .container-xl 等类行为错乱。
更稳妥的做法是：
- 直接切到
container-fluid px-0，天然适配任意分辨率 - 若需保留一定内边距，用
container-fluid px-5（3rem）、px-4（1.5rem）等工具类微调，比改断点变量轻量得多 - 只有 Sass 项目且明确需保持
container语义时，才重定义$container-max-widths，且必须同步更新$grid-breakpoints
真正卡住人的往往不是“怎么写”，而是没意识到 container-fluid 必须配合 px-0 和 min-vh-100 才算闭环；三者缺一，都会在某个设备或内容长度下露出破绽。
