如何消除Bootstrap 4网格布局中的列间距及元素间空隙？

嘿，我来帮你搞定这个间距问题！你提到用了no-gutters类和移除内边距都没效果，其实这个问题大概率和列的 gutter 无关，而是元素自身的默认样式或者自定义样式在搞鬼，咱们一步步来排查：

可能的原因&解决方案 #

• Bootstrap 标题标签的默认外边距：Bootstrap 里的 <h4> 标签默认带有 margin-bottom 属性，这很可能就是你看到的间距来源。no-gutters 只是控制列（col）之间的 padding，不会影响标题元素自身的 margin。
  解决方法很简单：给 <h4> 加上 Bootstrap 的内置类 mb-0（margin-bottom: 0），直接去掉默认下外边距：

  <h4 class="mb-0">Front-End Developer</h4>
  

• 按钮的默认/自定义上外边距：你的按钮用了自定义类 button-style，可以检查一下这个类是否设置了 margin-top，或者 Bootstrap 的 btn 类有没有继承的上外边距。如果有的话，直接在 CSS 里覆盖：

  .button-style {
    margin-top: 0;
  }
  

• 用开发者工具精准定位：如果上面的方法还是没解决，推荐用 Chrome/Firefox 的开发者工具（右键页面→检查），选中 <h4> 和按钮元素，查看「盒模型」面板，看看间距到底是来自 margin、padding 还是其他元素的影响，这样能精准找到问题点。

修改后的代码示例 #

这里是调整后的关键部分代码：

<div class="title-super col-md-4 col-sm-12 offset-md-4 text-uppercase text-right">
  <h1>Terence Fan</h1>
  <h4 class="mb-0">Front-End Developer</h4>
  <button type="button" class="btn btn-outline-dark button-style" data-toggle='modal' data-target="#AboutMe">About Me</button>
</div>

如果还有细微间距，再检查 .title-super 这个容器有没有设置内边距，或者行高的影响，用开发者工具就能一目了然啦～

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