ASP.NET + Bootstrap开发如何消除Div卡片之间的多余垂直间距

你当前配置不生效的核心原因是no-gutters类的使用位置错误，可按以下步骤排查修复：

• 修正no-gutters的挂载位置
  Bootstrap中用来消除列间距的no-gutters类需要添加到列的父级row元素上，而非单个col元素，同时需要给所有需要消除间距的列统一加padding清除类，参考修改后的结构：

<div class="row no-gutters">
  <div class="col-md-3 padding-0">                    
    <a href="First.aspx" class="btn dashMenuButton"><i class=" align-middle fas fas fa-users fa-3x"></i><br /><br />Card 1</a>
    <a href="Second.aspx" class="btn dashMenuButton"><i class="fas fa-users-cog fa-3x"></i><br /><br />Card 2</a>
  </div>
  <div class="col-md-3 padding-0">
    <a href="Third.aspx" class="btn dashMenuButton"><i class="fas fa-building fa-3x"></i><br /><br />Card 3</a>
    <a href="Fourth.aspx" class="btn dashMenuButton"><i class="fas fa-user-tag fa-3x"></i><br /><br />Card 4</a>
  </div>
</div>

如果使用的是Bootstrap 5版本，no-gutters类已被弃用，替换为给row添加g-0类即可。

• 排查样式优先级冲突
  如果修改后仍不生效，可通过浏览器开发者工具检查col元素的padding属性是否被Bootstrap默认样式覆盖，可添加高优先级的样式强制清除间距：

.row.no-gutters .col-md-3 {
  padding: 0 !important;
}

• 检查按钮自定义样式
  如果列的padding已经完全清除，仍存在多余间距，需要检查自定义类dashMenuButton是否设置了左右margin，根据需求调整margin数值即可缩小按钮间距。

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