Мое размещение не работает на Bootstrap 4 есть идеи?

Question

Я разрабатываю веб-страницу с помощью Bootstrap 4, и я не могу понять, почему это размещение неверно. Я буквально пялился на свой код вот уже добрых 15 минут и понятия не имею, почему.

Мой код:

<div class="container">

  <br/>
  <div class="row">
    <div class="col-md-6">
      <img src="img-side01a.jpg" width="555">
    </div>
    <div class="col-md-6" style="background-color: #5892EF;">

      <h2 style="color: white; @font-face{ font-family: bloomer; src: url('headerfont.otf');}">About Us</h2>

      <p style="color: white; font-family: 'Trebuchet MS';">text here</p>
    </div>
  </div>
  <br/>
  <div class="row">

    <div class="col-md-6" style="background-color: #5892EF;">
      <h2 style="color: white; @font-face{ font-family: bloomer; src: url('headerfont.otf');}">Mission Statement <img src="img-icon01a.png" width="25" height="25"></h2>
      <p style="color: white; font-family: 'Trebuchet MS';">text here</p>
    </div>
    <div class="col-md-6">
      <img src="img-side01b.png" class="img-fluid" width="555">
    </div>
  </div>
  <br/>
  <hr> copyright
</div>

Но есть только этот пробел, от которого я не могу избавиться. Я пытался использовать первое изображение для второго, и это не имеет значения ...

изображение

Answer 1

Разрыв заключается в том, что вы определили 2 строки. Вы можете поместить все классы col-md в одну строку. Ваши текущие коды столбцы второй строки автоматически опустятся ниже элементов первой строки без пробелов.

<div class="container">
<div class="row no-gutters">
<div class="col-md-6" style="padding:0px;">
<img src="https://www.w3schools.com/howto/img_snow.jpg" width="100%" height="50px">
    </div>
<div class="col-md-6 " style="background-color: #5892EF;">

<h2 style="color: white; ">About Us</h2>
<p style="color: white; font-family: 'Trebuchet MS';">text here</p>
</div>
<div class="col-md-6 " style="background-color: #5892EF;">
<h6 style="color: white;">Mission Statement</h6> 
<p style="color: white; font-family: 'Trebuchet MS';">text here</p>
</div>
<div class="col-md-6" style="padding:0px;">
<img src="https://www.w3schools.com/howto/img_snow.jpg" width="100%" height="50px">
</div>
</div>

Попробуйте этот код. Это была не ваша ошибка. Начальная загрузка класса col-md по умолчанию с заполнением 15px.