默认 .row 无法撑满全屏宽度，因其左右 -15px margin 用于抵消 .container 的 padding，需移除外层容器或重置 .row margin-left/right 为 0 并设 width: 100vw。
为什么默认的 .row 无法撑满全屏宽度
Bootstrap 的 .row 默认有左右各 -15px 的 margin，目的是抵消其父容器（如 .container）的 15px padding，从而让内容视觉上对齐。但这也意味着：只要 .row 在 .container 或 .container-fluid 内，它就**不会真正占满视口宽度**——左右永远被“框住”。真正全屏，得先破掉这个约束链。
去掉外层容器限制：用 .container
最直接的方式是不套 .container，让 .row 直接挂载在无 padding/margin 限制的元素下。常见做法：
- 把
.row放在下（需手动重置body的默认 margin） - 用一个自定义 class（如
.full-width）作为父级，设margin: 0; width: 100vw;并取消 padding - 避免使用
.container和.container-fluid——它们本质就是宽度限制器
示例：
<div class="row">
<div class="col-12">这行将真正铺满整个视口宽度</div>
</div>
修正 .row 自身的负边距：覆盖默认样式
如果必须保留外层容器（比如页面其他区域仍需 .container），可以局部重置 .row 行为：
- 加自定义 class 如
.row-full，并设margin-left: 0; margin-right: 0; - 注意：此时内部
.col的 padding 依然存在（默认15px），若要真正“贴边”，还需清空.col的左右 padding 或用px-0 - 不要只改
margin而忽略width——某些 Bootstrap 版本（如 v4）中.row有width: -webkit-fill-available等兼容写法，建议显式设width: 100%;
推荐 CSS：
.row-full {
margin-left: 0 !important;
margin-right: 0 !important;
width: 100vw;
}
v5+ 中的 g-0 和 gx-0 不解决根本问题
有人试过 class="row g-0"，但这只清除了 gutter（列间距），.row 的负 margin 依然存在。关键点在于：
-
g-*系列控制的是--bs-gutter-x/y变量，影响的是.col的 padding，不是.row的 margin - 即使
g-0+px-0，若父级是.container，整体还是被锁在固定宽度内 - 真要“全屏”，必须打破容器边界或重置
.row的外边距逻辑
最容易被忽略的细节是：你是否真的需要“全屏宽度”，还是只是“内容区宽度”？前者绕不开视口单位（vw）和容器剥离，后者用 .container-fluid 就够了——但它仍受 max-width 限制（如 v5.3 默认 1320px），并非真正全屏。
