.container默认左右padding是设计所需，并非bug，用于配合.row负margin实现栅格对齐与gutter；白边主因常为body默认margin或嵌套盒模型叠加。
container 默认 padding 是白边主因
Bootstrap 的 .container 类在所有断点下都带 padding-left 和 padding-right（默认是 var(--bs-gutter-x, 0.75rem)），这直接导致内容左右“缩进”，视觉上就是两侧白边。这不是 bug，是设计使然——它为栅格系统预留了 gutter 空间。
常见错误现象：用 <div class="container"> 包住全宽 banner 或 canvas，结果左右各空出 12px；DevTools 里看到 <code>padding 明明生效，但没意识到这是框架默认行为。
- 不要改 CDN 的 Bootstrap CSS，用自定义类覆盖更安全
- 若只需移除水平内边距：
.my-container { padding-left: 0; padding-right: 0; } - 移动端敏感场景（如触控按钮贴边）建议加媒体查询：
@media (max-width: 767.98px) { .my-container { padding: 0; } }
body 默认 margin 才是全局白边元凶
即使清掉了 .container 的 padding，页面四周边缘仍有白边，大概率是 自带的 margin: 8px（所有现代浏览器默认值）在作祟。这个 margin 和你写的 body { padding: 100px } 一样，会把整个页面往里推。
常见错误现象：用了 .container-fluid 还有白边；overflow-x: auto 横向滚动条莫名出现；canvas 或背景图始终无法真正撑满视口。
- 最简方案：给
加 Bootstrap 工具类m-0 p-0（含!important，能压过其他声明） - 纯 CSS 方案（推荐放样式表最顶部）：
body { margin: 0; padding: 0; } - 务必检查是否引入了重置 CSS（如旧版 normalize.css），它可能覆盖了你的 body 重置规则
row 的负 margin 与 col 的 padding 组合会放大溢出
.row 的 margin-left: -15px 和 margin-right: -15px 是为了抵消 .col-* 的 padding，但一旦你手动给 .col-* 加了额外 padding 或 border，又没设 box-sizing: border-box，就会触发宽度溢出。
常见错误现象：右侧突然出现横向滚动条；小屏下内容被截断；width: 100% 的子元素比父容器宽
- 确认
box-sizing: border-box是否生效：DevTools 中看该属性是否被划掉，尤其注意是否被自定义 reset 覆盖 - 避免给
.row或.col-*直接设min-width——它会突破.container的max-width约束 - 慎用
width: 100%+padding组合，优先用 Bootstrap 的间距工具类（如px-4）替代手写 padding
误改 margin 会让 container 失去居中能力
.container 居中靠的是 margin-left: auto 和 margin-right: auto。只要你在 CSS 里写了 margin-left: 20px 或用了 ms-3 这类工具类，左右 margin 就不再对称，容器立刻右偏——而且偏移量随断点变化，很难调试。
常见错误现象：在桌面端看着居中，切到手机就歪了；加了 mx-auto 没反应；DevTools 里 margin 值显示不一致
- 永远别碰
.container的margin，要留白就用padding或工具类（如px-5） - 如果真需要外边距控制（比如和上一区块拉开距离），给
.container的父元素加mb-4，而不是动它本身 - RTL 场景下，用
ms-* / me-*替代ml-* / mr-*，否则方向会反
实际项目里，白边往往不是单一原因。先查 body，再查 .container，最后盯住 .row 和 .col-* 的盒模型组合——三者叠加时，一个没处理好，留白就藏不住。
