Как убрать место для колонки в Bootstrap 4 Grid Layout?

Question

Я работаю над удалением пространства между Front End Developer и About Me модальным.Кажется, он не работает, когда я использовал такие классы, как отсутствие желоба и удаление отступов.

Справочное изображение

У кого-нибудь есть идеи?

<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

установить vertical-align: top на button-style

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

рабочая скрипка здесь

Answer 2

Вы можете использовать .align-top класс начальной загрузки css для элемента вертикального выравнивания.

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

Answer 3

Попробуйте добавить этот код в свой CSS.

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