Блог

Я работаю над веб-сайтом, использующим bootstrap4, и пытаюсь разместить два текстовых поля рядом. Несмотря на то, что я использовал систему с 12 сетками, каким-то образом мои столбцы укладываются сверху / снизу, а не рядом. Ниже приведен мой код. Как вы можете видеть, я использовал col-md6 по два <div> для каждой записи, а для мобильной версии я использовал col-12 , чтобы в каждой строке могло быть только по одной записи / изображению. Но почему-то на экране ноутбука он не отображается рядом. Почему это так? Когда я проверил страницу, на ней появилось огромное оранжевое пространство, которое я предполагал, но настройка margin:0 не помогла. :

 .album {
    margin-bottom: 100px;
}
.album img {
    width: 800px;
}

.content {
    padding: 2px;
    width: 100%;
}

.blogWriting {
    margin-bottom: 80px;
    padding: 15px 35px;
    font-size: 13px;
}

.dateWriting {
    font-size: 13px;
}
.container {
    width: 800px;
} 

 <style>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

</style>

<div class="album">
  <div class="row justify-content-center">
      <div class="col-12 col-md-auto firstContent">
          <img src="https://via.placeholder.com/150" alt="d">
      </div>
  </div>

  <div class="row justify-content-center">
      <div class="container">
          <div class="col-12 col-md-6 content">
              <div class="blogWriting">
              <p><b>Crown Heights</b> is simply dummy text of
                  the printing and typesetting industry.
                  Lorem Ipsum has been the industry's standard
                  dummy text ever since the 1500s,
                  when an unknown printer took a galley
                  of type and scrambled it to make a type
                  specimen book. It has survived not only
                  five centuries, but also the leap into
                  electronic typesetting, remaining
                  essentially unchanged.
              </p>
              <p><b>Bushwick</b> is simply dummy text of
                  the printing and typesetting industry.
                  Lorem Ipsum has been the industry's standard
                  dummy text ever since the 1500s,
                  when an unknown printer took a galley
                  of type and scrambled it to make a type
                  specimen book. It has survived not only
                  five centuries, but also the leap into
                  electronic typesetting, remaining
                  essentially unchanged.
              </p>
              </div>
          </div>

          <div class="col-12 col-md-6 content">
              <div class="dateWriting">
                  <p>October 28th, 2020 <br>
                  By Name </p>
              </div>
          </div>
      </div>
  </div>
</div> 

Прежде всего, кажется, что Bootstrap некорректно загружается через CDN, потому что у вас есть тег стиля вокруг ссылки. Этот тег стиля необходимо удалить.

Во-вторых, у вас есть контейнер внутри вашей строки. Контейнер должен быть вокруг вашей строки.

 <!-- Removed style tag here -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<!-- Added container class around row classes. -->
<div class="album container">

  <div class="row justify-content-center">
    <div class="col-12 col-md-auto firstContent">
      <img src="https://via.placeholder.com/150" alt="d">
    </div>
  </div>

  <div class="justify-content-center">
    <div class="row">
      <div class="col-12 col-md-6 content">
        <div class="blogWriting">
          <p><b>Crown Heights</b> is simply dummy text of
            the printing and typesetting industry.
            Lorem Ipsum has been the industry's standard
            dummy text ever since the 1500s,
            when an unknown printer took a galley
            of type and scrambled it to make a type
            specimen book. It has survived not only
            five centuries, but also the leap into
            electronic typesetting, remaining
            essentially unchanged.
          </p>
          <p><b>Bushwick</b> is simply dummy text of
            the printing and typesetting industry.
            Lorem Ipsum has been the industry's standard
            dummy text ever since the 1500s,
            when an unknown printer took a galley
            of type and scrambled it to make a type
            specimen book. It has survived not only
            five centuries, but also the leap into
            electronic typesetting, remaining
            essentially unchanged.
          </p>
        </div>
      </div>

      <div class="col-12 col-md-6 content">
        <div class="dateWriting">
          <p>October 28th, 2020 <br>
            By Name </p>
        </div>
      </div>

    </div>
  </div>
</div>
 

 .album {
  margin-bottom: 100px;
}
.album img {
  width: 800px;
}

.content {
  padding: 2px;
  width: 100%;
}

.blogWriting {
  margin-bottom: 80px;
  padding: 15px 35px;
  font-size: 13px;
}

.dateWriting {
  font-size: 13px;
}
.container {
  width: 800px;
}