如何移除Bootstrap布局中的顶部外边距？附对应布局代码

这事儿不难解决——你给.row元素加的mt-4类正是顶部外边距的来源，这是Bootstrap自带的margin-top工具类（mt是margin-top的缩写，4对应预设的边距值）。要移除这个顶部边距，你有几个靠谱的方案：

• 直接移除mt-4类（最推荐）
  既然mt-4是导致顶部外边距的原因，直接把它从class属性里删掉就行。修改后的代码如下：

  <div class="row" id="content"> 
    <div class="col owl-carousel"> 
      <div class="slide text-center"> 
        <div class="innerslide"> 
          <h1>截至目前总注册人数</h1> 
          <p class="split-para align-middle">总计: <span id="total-registered"></span></p> 
          <p class="split-para align-middle">德班: <span id="durban-registered"></span></p> 
          <p class="split-para align-middle">Piet...</p>
        </div>
      </div>
    </div>
  </div>
  

  这种方式最干净，完全符合Bootstrap的设计逻辑，不会留下多余的样式代码。

• 用Bootstrap的mt-0类覆盖（适合无法修改原类的场景）
  如果你因为某些原因不能删掉mt-4（比如代码是动态生成的，你没法直接修改原标签），可以用Bootstrap自带的mt-0工具类来覆盖它——这个类的作用就是把元素的margin-top设为0。修改后代码：

  <div class="row mt-4 mt-0" id="content"> 
    <!-- 内部代码保持不变 -->
  </div>
  

  因为Bootstrap工具类的CSS优先级相同，后面的类会覆盖前面的，所以mt-0会生效，替换掉mt-4的边距设置。

• 自定义CSS强制覆盖（极端场景）
  如果上面两种方法都不适用，还可以用自定义CSS来强制去掉顶部外边距：
  你可以直接在元素上加内联样式：

  <div class="row mt-4" id="content" style="margin-top: 0 !important;"> 
    <!-- 内部代码保持不变 -->
  </div>
  

  或者在你的全局样式表中添加：

  #content {
    margin-top: 0 !important;
  }
  

  这里的!important是用来确保自定义样式的优先级高于Bootstrap的工具类样式，不过一般不推荐滥用这个属性，除非万不得已。

内容的提问来源于stack exchange，提问作者Greg Strydom