
bootstrap 的 `container` 类会自动添加左右内边距(padding),导致页面内容两侧出现白边;只需移除该类或改用 `container-fluid` 即可消除默认 padding。
在使用 Bootstrap 构建响应式页面时,开发者常将内容包裹在
✅ 正确解决方式如下:
-
方案一(推荐):移除 container 类
若你希望内容完全贴边(例如全屏动画背景、横幅标题等),直接删除 container 类即可:...Internet Of Things
-
方案二:改用 container-fluid
该类同样提供响应式宽度管理,但不设置左右 padding(仅在部分版本中保留 padding-right: 0; padding-left: 0;),语义上更契合“全宽布局”需求:...
⚠️ 注意事项:
- 不要通过暴力覆盖 CSS(如 padding: 0 !important)来修复,这会破坏 Bootstrap 的响应式一致性;
- 检查是否误将 .container 应用于多层嵌套元素——单个页面通常只需一个容器级 wrapper;
- 若需局部去 padding,可结合 Bootstrap 工具类:p-0(全方向)、px-0(仅左右)、mx-n3(负外边距抵消)等,但应优先考虑语义化结构优化。
总结:Bootstrap 的 padding 行为是设计使然,而非 bug。理解 container 与 container-fluid 的语义差异,并按需选用,是构建专业、可控布局的关键一步。










