Как не дать сетке Bootstrap 4 разбить содержимое столбца на две части при изменении размера?

Question

Прежде всего, позвольте мне сказать, что я впервые пытаюсь использовать систему координат Bootstrap, поэтому я заранее прошу прощения, если это глупый вопрос.

Я пытаюсь создать отзывчивый Страница с 3 колонками, каждая с изображением и спойт-плеером.

У меня это работает при просмотре в полном окне: отображение 3 столбцов

, а также в небольшом окне: отображение 1 столбца

, но при изменении размера на 2 столбца содержимое 3-го столбца разбивается на две части: Отображение 2 столбцов

Мой текущий код:

      <div class="container">
        <div class="row">
          <div class="col text-center">
            <img src="images/capa_marrow.jpg" height="300" width="300">
            <iframe src="https://open.spotify.com/embed/album/20zacwBmt9ay2EcAYb8CLc" width="300" height="380" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe>
          </div>
          <div class="col text-center">
            <img src="images/capa_difraction.jpg" height="300" width="300">
            <iframe src="https://open.spotify.com/embed/album/4sbQLJP8qPaiQXNqTYAYSp" width="300" height="380" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe>
          </div>
          <div class="col text-center">
            <img src="images/capa_chromatic.jpg" height="300" width="300">
            <iframe src="https://open.spotify.com/embed/album/4X9FVjDibj5yWgZYVwOVRj" width="300" height="380" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe>
          </div>
        </div>
      </div>  

Как я могу предотвратить это, чтобы изображение всегда отображалось над спойт-плеером?

Answer 1

Существует несколько способов исправить это. Я бы использовал flexbox. Добавьте d-flex flex-column к каждому из col делений.

Это происходит потому, что iframe и img по умолчанию display: inline - это означает, что они будут располагаться рядом, если есть достаточно места , В ваших дисплеях с 3 и 1 столбцами недостаточно места для размещения img над iframe, но при отображении с 2 столбцами в 3-м столбце достаточно места для их отображения рядом.

Вы увидите это еще лучше, если вы измените container на container-fluid и сделаете ваш экран ДЕЙСТВИТЕЛЬНО широким (например, сделайте его шире, чем экран вашего компьютера).