Bootstrap存在默认内边距？如何移除其导致的网页头部留白？

你遇到的左侧内边距是Bootstrap自带的默认样式导致的，不用移除Bootstrap，针对性覆盖冲突样式即可解决，以下是具体方案：

• 直接覆盖头部元素的内边距：
  给你的动画头部添加自定义CSS，通过提高选择器权重来覆盖Bootstrap的样式（避免滥用!important）：

  body .animated-header {
    padding-left: 0;
    margin-left: 0;
  }
  

• 检查容器类的影响：
  如果你把头部放在了container或container-fluid中，这两个类默认带有左右内边距。可以自定义一个无内边距的容器类：

  .container-no-padding {
    padding-left: 0;
    padding-right: 0;
  }
  

  然后将头部所在的容器替换为这个类即可。

• 排查Navbar组件默认样式：
  如果你的动画头部基于Bootstrap的Navbar组件，Navbar默认带有左右内边距，直接覆盖即可：

  .navbar {
    padding-left: 0;
    padding-right: 0;
  }
  

小技巧：使用浏览器开发者工具（F12）选中留白区域的元素，在样式面板中找到对应的padding-left规则，确认是Bootstrap的哪个样式导致的，再精准覆盖，这样更高效。

内容的提问来源于stack exchange，提问作者Aditya Parmar