Почему бы не два изображения вместе с абзацем быть встроенным?

Question

Система сетки начальной загрузки делит весь экран на 12 частей, поэтому я создал строку, а затем разделил ее на два столбца и поместил изображение и некоторые тексты в оба столбца, но они располагаются один за другим, а не в строке

<div class="row">
  <div class="col-lg-6">
    <img src=""> (text)

  <div class="col-lg-6">
    <img src=""> (text)         
  </div>

Я ожидаю результата, когда в одном ряду будет два изображения и несколько текстов после каждого изображения

Answer 1

Вы должны убедиться, что вы правильно закрыли все свои деления. Это означает, что вам нужно закрыть свой первый столбец <div>, а затем строку <div>.

Вам также следует применять CSS к самим изображениям, чтобы они не выходили за пределы своих столбцов. В приведенном ниже примере я сделал так, чтобы изображения охватывали всю ширину и имели автоматическую высоту (чтобы сохранить соотношение сторон).

Строки также должны храниться в контейнере ,Вы можете использовать класс container или container-fluid, чтобы указать, какой контейнер вам нужен.

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

.img {
  height: auto;
  width: 100%;
}

<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">

<div class="container-fluid">
  <div class="row">
    <div class="col-lg-6">
      <img class="img" src="https://images.unsplash.com/photo-1524293581917-878a6d017c71?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80" />
      <p>(text)</p>
    </div>
    <div class="col-lg-6">
      <img class="img" src="https://images.unsplash.com/photo-1500622944204-b135684e99fd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80" />
      <p>(text)</p>
    </div>
  </div>
</div>