如何移除 Bootstrap 的默认内边距（padding）

心靈之曲 2026-01-11 00:00:00 次阅读

bootstrap 的 `container` 类会自动添加左右内边距（padding），导致页面内容两侧出现白边；只需移除该类或改用 `container-fluid` 即可消除默认 padding。

在使用 Bootstrap 构建响应式页面时，开发者常将内容包裹在

中以实现居中与最大宽度控制。然而，container 类默认设置了 padding-left: 15px 和 padding-right: 15px（在所有断点下），这正是你在动画页头（如 #large-header）两侧看到“白边”的根本原因——并非 margin 或定位问题，而是容器自身的 padding。

✅ 正确解决方式如下：

方案一（推荐）：移除 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（负外边距抵消）等，但应优先考虑语义化结构优化。