如何移除容器（container）内部的边距？

嘿，这个问题太常见啦！你看到的容器左侧和文本之间的间距，其实是Bootstrap的.container类默认自带的左右内边距（padding）——这是框架为了让内容在不同屏幕尺寸下更美观而预设的样式。要消除这个间距，有几个简单的办法：

• 自定义CSS覆盖默认样式
  直接在你的.container样式里添加消除左右内边距的属性就行，记得要保证你的自定义CSS在Bootstrap样式之后加载，这样才能覆盖框架的默认设置：

  .container {
    border: 1px solid black;
    padding-left: 0;
    padding-right: 0;
  }
  

• 用Bootstrap自带的工具类
  Bootstrap提供了现成的内边距工具类，px-0就是专门用来设置左右内边距为0的，直接把它加到容器标签上就行，省得写额外CSS：

  <div class="container px-0">
    <h2>Hello</h2>
  </div>
  

• 进阶：响应式消除内边距
  如果你只想在特定屏幕尺寸下消除间距，可以用Bootstrap的响应式工具类，比如px-md-0——意思是在中等屏幕（≥768px）及以上尺寸消除左右内边距，小屏幕保持默认的全屏无padding状态。

内容的提问来源于stack exchange，提问作者Talha Munir