直接删 .container 类最干净：其默认左右 15px padding 是“白边”根源，非 bug 而是设计；全宽场景下应移除该类，改用语义化自定义容器（如 hero-section），避免 !important 或误用 px-0/g-0 带来的副作用。
直接删 .container 类最干净
Bootstrap 的 .container 类左右默认带 15px padding，这是你看到“白边”的根源。它不是 bug，是设计——为内容留出呼吸空间。但如果你要做全宽背景、横幅或 canvas 动画，这个 padding 就成了干扰。
最稳妥的做法是：不改 CSS，不加 !important，直接删掉 class="container"。用语义更清晰的自定义 wrapper（比如 class="hero-section"）替代。这样既没副作用，也不影响栅格系统其他部分。
-
.container-fluid虽然也铺满视口，但某些旧版 Bootstrap 仍会残留padding-left: 0; padding-right: 0;的冗余声明，不如直接不用 - 若必须保留
.container（例如需要它的 max-width 响应式断点），可用px-0移除左右内边距，但要注意：它只作用于该元素自身，不改变子级.row的负外边距逻辑 - 别写
.container { padding: 0 !important }——这会破坏所有断点下的响应式行为，尤其在 sm/md 等尺寸下可能让内容撑破视口
g-0 是控制列间距的唯一正解
很多人想通过 p-0 或 mx-n3 手动调列间距，结果发现布局偏移、列宽错乱。根本原因在于：Bootstrap 的 gutter 不是单靠 .col 的 padding 实现的，而是 .row 的负 margin（如 margin-left: -15px）和 .col 的正 padding 协同抵消出来的。
所以正确方式只有一个：g-0 作用于 .row。它会同步归零 .row 的负外边距和所有子 .col 的左右内边距，保持 flex 布局完整性。
-
g-0是 Bootstrap 5.1+ 内置工具类，兼容所有断点（g-md-0、g-lg-2等也可用） -
gx-0仅清水平间距，gy-0仅清垂直间距，比g-0更细粒度 -
px-0不等于g-0：前者只清当前元素左右 padding，后者重置整行 gutter 协议
方形容器对不齐？大概率是 box-sizing 没设
当你把 .square-container 放进 .col-md-6，又设了固定宽高（比如 width: 220px; height: 235px;），却总感觉右边窄一点、上下不对齐——问题往往不在 gutter，而在尺寸计算本身。
默认 box-sizing: content-box 下，如果容器有 border 或 padding，实际占用宽度 = width + padding + border。而 .col-md-6 的可用宽度本就因 gutter 缩水了，再叠加额外尺寸，必然溢出或换行。
- 统一加
box-sizing: border-box到所有.square-container - 宽度优先用
width: 100%，而非固定像素；高度可保留固定值，或改用aspect-ratio: 1 / 1（注意 IE 不支持） - 嵌套
.row时，记得子.row也要加g-0，否则父级.col的 padding 还在起效
优缺点其实取决于使用场景
Bootstrap 的 padding 和 gutter 不是缺陷，是约束。它强制你思考“内容该不该呼吸”“列间是否需要视觉分隔”。强行全局清除，短期省事，长期会让团队成员难理解为什么某块区域突然贴边、某处间距消失。
真正容易被忽略的点是：这些间距机制是分层生效的——.container 控制整体留白，.row 控制列间节奏，.col 控制内部容错空间。一层没理清，补丁就会打到下一层，最后 CSS 越来越重，调试越来越慢。
