Почему элементы товара неправильно располагаются при добавлении их из базы данных с использованием Bootstrap?

Как можно исправить расположение изображений, чтобы они выводились в сетке корректно независимо от размера экрана при загрузке изображений из базы данных, чтобы они не сгруппировывались в один столбец и не требовалось писать каждый товар в отдельном блоке?
  • 22 февраля 2024 г. 6:48
Ответы на вопрос 2
Проблема возникает из-за того, что по умолчанию Bootstrap использует классы для создания сетки из 12 столбцов, которая автоматически адаптируется к размеру экрана. Если ваши изображения не правильно отображаются в сетке при добавлении их из базы данных, возможно, вам нужно настроить CSS стили для элементов товара.

Для того чтобы исправить расположение изображений и обеспечить их корректное отображения в сетке независимо от размера экрана, вы можете использовать классы Bootstrap для определения ширины элементов. Например, можно разделить изображения на равные части, задавая каждому элементу класс col-3 или col-4 (и т.д.), чтобы они отображались в соответствии с желаемым количеством столбцов на странице.

Например, если у вас есть несколько изображений товаров, вы можете использовать следующий код:

```html
<div class="row">
  <?php foreach($products as $product): ?>
    <div class="col-3">
      <img src="<?php echo $product['image']; ?>" alt="<?php echo $product['name']; ?>" class="img-fluid">
      <h3><?php echo $product['name']; ?></h3>
      <p><?php echo $product['description']; ?></p>
    </div>
  <?php endforeach; ?>
</div>
```

Этот код будет выводить изображения товаров в сетке по 4 элемента в каждом ряду. Вы можете настроить классы col-* в соответствии с вашими потребностями.

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

В один контейнер+ряд+столбец, для каждого из изображений. Сурово! Предлагаю все таки ограничиться колонками:
include("bd.php");

mysqli_query($bd, "SET NAMES utf8 COLLATE utf8_unicode_ci");

$res = mysqli_query($bd, "SELECT * FROM kat");

echo '<div class="container">';
echo '<div class="row">';

while($row = mysqli_fetch_array($res)) {
    echo '<div class="col-6 col-sm-6 col-md-4 col-lg-3 col-xl-2">';
    echo '<img src=img/tovar/' . $row['img'] . ' class="img-fluid"/>';
    echo '</div>';
}

echo '</div>';
echo '</div>';
Похожие вопросы