Блог

Главная - Вопросы по программированию - Bootstrap 4.5 grid

Bootstrap 4.5 grid

#html #css #bootstrap-4

#HTML #css #bootstrap-4

Вопрос:

У меня какая-то странная проблема… Я хотел создать какой-то веб-магазин. Итак, у меня есть 1 строка с 4 столбцами (4 продукта), и я также использую Bootstrap 4.5, вот что получается: введите описание изображения здесь

Простая картинка с проблемой не помещается внутри, но пространство между блоками не уменьшается, почему? И как я могу изменить размер этих полей? Быть шире и получать небольшое пространство между ними? Вот код:

 <section>
      <div class="container products">
          <div class="row justify-content-center">
            <div class="col-md-2 item">
                <img src="/img/product.png" alt="product">
            </div>
            <div class="col-md-2 offset-md-1 item">
                  
            </div>
            <div class="col-md-2 offset-md-1 item">
                  
            </div>
            <div class="col-md-2 offset-md-1 item">
                  
            </div>
          </div>
      </div>
  </section>

Комментарии:

1. Попробуйте добавить класс img-fluid к изображению

2. Он отлично работает. Спасибо, но теперь, как я могу сделать это поле шире? Это слишком узко…

3. col-md-2 устанавливает с помощью. Два столбца из 12 в строке. Итак, у вас есть четыре раздела, каждый из которых занимает два столбца, что оставляет вам четыре неиспользуемых столбца. Вы можете попробовать изменить col-md-2 на col-md-3

4. Хорошо, я тоже это сделал. Но тогда между блоками нет пробела…

Ответ №1:

Попробуйте удалить offset-md-1 класс и добавить поле для item класса. Если вы хотите расширить блоки, измените col-md-2 на col-md-3