Bootstrap嵌套Grid Row顶部留白问题：如何实现居中对齐？

可能原因及对应解法 #

• 外层列默认内边距导致视觉留白：Bootstrap的.col-*类默认带有左右内边距，若嵌套的.row未抵消这个影响，或你希望内容与外层列顶部完全贴合，可直接用Bootstrap工具类去掉外层列的顶部内边距：

  <div class="container-fluid">
    <div class="row">
      <!-- 用pt-0清除列的顶部内边距 -->
      <div class="col-md-4 pt-0">
        <div class="row">
          <div class="col">嵌套行内容</div>
        </div>
      </div>
      <div class="col-md-4">第二列内容</div>
      <div class="col-md-4">第三列内容</div>
    </div>
  </div>
  

• 嵌套行意外继承margin-top：若自定义样式或第三方代码给.row添了额外的顶部外边距，可直接重置：

  .nested-row {
    margin-top: 0 !important;
  }
  

  给嵌套的.row加上nested-row类即可生效。

• 实现Excel式垂直居中：如果目标是让嵌套行内容在列内垂直居中，无需纠结留白，直接给外层列加Flex布局工具类：

  <div class="container-fluid">
    <div class="row">
      <div class="col-md-4 d-flex align-items-center">
        <!-- 加w-100确保嵌套行占满父列宽度 -->
        <div class="row w-100">
          <div class="col">垂直居中内容</div>
        </div>
      </div>
      <div class="col-md-4">第二列内容</div>
      <div class="col-md-4">第三列内容</div>
    </div>
  </div>
  

排查小技巧 #

1. 按F12打开浏览器开发者工具，选中嵌套的.row元素，查看它的margin、padding属性，以及父列的内边距，精准定位留白来源。
2. 检查自定义CSS是否无意中给.row或.col添加了额外间距样式。

内容的提问来源于stack exchange，提问作者Danny.ok