如何删除 space for column on Bootstrap 4 Grid Layout？

Question

我正在努力删除前端开发人员和关于我模式之间的 space。当我使用类时它似乎不起作用，例如没有装订线和删除填充。

Reference image

有没有人有什么想法？

<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 源代码 here

提前致谢！

Answer 1

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

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

Answer 2

将vertical-align: top设置为button-style

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

工作fiddlehere

Answer 3

您可以使用 .align-top bootstrap css class 垂直对齐元素。

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

如何删除 space for column on Bootstrap 4 Grid Layout？

How to remove the space for column on Bootstrap 4 Grid Layout?

html

css

bootstrap-4

webpage

google-web-designer