0

Существует следующий блок: введите сюда описание изображения

И всё казалось бы хорошо, но заключив блок с изображениями товаров в <div> мы получаем следующее:

введите сюда описание изображения

С чем это связано и как это можно исправить?

Разметка:

        <div>
            <div class="col-lg-4">
                <img src="img/production/napoleon.png" alt="">
                <p>НАПОЛЕОН</p>
            </div>
            <div class="col-lg-4">
                <img src="img/production/choco.png" alt="">
                <p>ШОКОЛАДНЫЙ</p>
            </div>
            <div class="col-lg-4">
                <img src="img/production/medovik.png" alt="">
                <p>МЕДОВИК</p>
            </div>
        </div>
3
  • 1
    потому что обёртка в данном случае требует класса row 27 апр 2018 в 10:05
  • Жуть, а почему в 3-м бутстрапе такого не было?
    – user287060
    27 апр 2018 в 10:07
  • ну, там строго говоря, тоже row требовался, просто 3-й бутстрап на float'ах - там обёртка не столь критична, а 4-й на флексах - тут без обёртки никуда 27 апр 2018 в 10:09

1 ответ 1

0

Допишите div два класса row и d-flex, или используйте код который написан ниже:

.wrapp {
  display: flex;
}

.img {
  width: 300px;
  height: 300px;
  background: #000;
}

.col-lg-4 {
  width: 25%;
}
<div class="wrapp">
  <div class="col-lg-4">
    <div class="img"></div>
    <p>НАПОЛЕОН</p>
  </div>
  <div class="col-lg-4">
    <div class="img"></div>
    <p>ШОКОЛАДНЫЙ</p>
  </div>
  <div class="col-lg-4">
    <div class="img"></div>
    <p>МЕДОВИК</p>
  </div>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.