начальная загрузка 4 предметов рядом друг с другом

Question

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

+----------------+-----------------------------+
| centered image |  here is some centered text |
+----------------+-----------------------------+
| centered image |  here is some centered text |
+----------------+-----------------------------+
| centered image |  here is some centered text |
+----------------+-----------------------------+

В любом случае, я считаю, что есть лучшеечем то, как я это делаю.Это то, что я сделал до сих пор.

И последнее, было бы неплохо, если бы развал столбцов был только для мобильных устройств (в низком разрешении), но в конце это не имеет большого значения.,

<div class="col-sm-8 text-left">
  <div class="container">
    <div style="margin: 110px 0px 0px 0px"></div>
    <div class="row">
      <div class="col-xs-12">
        Welcome! Welcome! Welcome! Welcome! Welcome! Welcome! Welcome! Welcome! Welcome! Welcome! Welcome!
      </div>
    </div>
    <div class="row" style="margin: 30px 0px 0px 0px">
      <div class="col-xs-3">
        <img src="./images/1.png" height="150">
      </div>
      <div class="col-xs-9" style="padding: 40px;">
        <p>This is my super super super super dummy dummy text text text text.</p>
      </div>
    </div>
    <div class="row" style="margin: 0px 0px 0px 0px">
      <div class="col-xs-3" style="padding: 30px 0px 0px 0px">
        <img src="./images/2.png" height="150">
      </div>
      <div class="col-xs-9" style="padding: 0px 0px 0px 40px;">
        <div style="width:500px;">
          <p>This is my super super super super dummy dummy text text text text.</p>
        </div>
      </div>
    </div>
    <div class="row" style="margin: 30px 0px 0px 0px">
      <div class="col-xs-3" style="margin: 30px 0px 0px 0px">
        <img src="./images/Change.png" height="150">
      </div>
      <div class="col-xs-9" style="padding: 10px 0px 0px 40px;">
        <div style="width:500px;">
          <p>
            This is my super super super super dummy dummy text text text text
          </p>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

Примечание: я удалил родительский div с col-8 с выравниванием текста по левому краю.

Чтобы центрировать столбцы вертикально внутри строки, добавьте align-items-center к row div.Чтобы центрировать столбец по горизонтали и вертикали в пределах его секции строки, добавьте класс align-self-center к разделу col-sm-*.

. Если вы хотите, чтобы столбцы сворачивались на мобильных устройствах (очень маленьких), вам нужноиспользовать классы col-sm-*, что означает, что они будут занимать n столбцов на устройствах небольшого или большего размера, и, следовательно, они будут занимать 100% пространства на сверхмалых устройствах (стандартные телефоны шириной <576 пикселей).</p>

Нодир Рашидов также прав: Bootstrap 4 заменил классы col-xs-* Bootstrap 3 на col-*, учитывая, что это самая низкая точка останова и, следовательно, значение по умолчанию для самого маленького экрана.

Bootstrap 4также есть вспомогательные классы для отступов и полей, поэтому вам не нужно добавлять их как встроенные стили: https://getbootstrap.com/docs/4.1/utilities/spacing/

Вы также можете центрировать теги img и p в столбцах div, используяm-auto class (margin-auto).

Для этого типа макета (img выровнен по тексту слева) вы также можете попробовать использовать медиа-объект Bootstrap 4:https://getbootstrap.com/docs/4.1/layout/media-object/ (посмотрите пример с выравниванием по центру)

  <div class="container">
    <div class="row">
      <div class="col-sm-12">
        Welcome! Welcome! Welcome! Welcome! Welcome! Welcome! Welcome! Welcome! Welcome! Welcome! Welcome!
      </div>
    </div>
    <div class="row align-items-center">
      <div class="col-sm-3 align-self-center">
        <img src="./images/1.png" height="150">
      </div>
      <div class="col-sm-9 align-self-center">
        <p>This is my super super super super dummy dummy text text text text.</p>
      </div>
    </div>
    <div class="row align-items-center">
      <div class="col-sm-3 align-self-center">
        <img src="./images/2.png" height="150">
      </div>
      <div class="col-sm-9 align-self-center">
          <p>This is my super super super super dummy dummy text text text text.</p>
      </div>
    </div>
    <div class="row align-items-center">
      <div class="col-sm-3 align-self-center">
        <img src="./images/Change.png" height="150">
      </div>
      <div class="col-sm-9 align-self-center">
          <p>This is my super super super super dummy dummy text text text text</p>
      </div>
    </div>
  </div>