html - 如何删除 Bootstrap 4 网格布局上的列空间？

Question

我正在努力删除前端开发人员和关于我模式之间的空间。当我使用诸如无排水沟和删除填充物之类的类时，它似乎不起作用。

参考图像

有没有人有任何想法？

<header>
  <div class="row no-gutters">
    <div class="col-md-4 col-sm-12">
      <img class="title-logo" src="./resources/images/logo.jpeg">
    </div>
    <div class="title-super col-md-4 col-sm-12 offset-md-4 text-uppercase text-right">
      <h1>Terence Fan</h1>
      <h4>Front-End Developer</h4>
      <button type="button" class="btn btn-outline-dark button-style" data-toggle='modal' data-target="#AboutMe">About Me</button>
    </div>
  </div>
  <div class="row">
    <div class="col-md-12">
      <hr>
    </div>
  </div>
</header>

我在这里有完整的 Github 源代码

提前致谢！

Answer 1

尝试将此代码添加到您的 CSS。

.title-super .btn {
    vertical-align: top;
}

Answer 2

设置vertical-align: top为button-style

.button-style {
  vertical-align: top;
}

在这里工作小提琴

Answer 3

您可以将.align-top 引导 css 类用于垂直对齐元素。

<button type="button" class="btn btn-outline-dark button-style align-top" data-toggle='modal' data-target="#AboutMe">About Me</button>