3 карты столбцов подряд с бутстрапом

Я хочу отобразить 3 столбца карточек подряд, но показывает только 2 столбца. Я использую бутстрап и CSS. Вот код.

 <style type = "text/css">
    .card{
      width: 350px;
    }
  </style>

    
    <div class = "container text-center" style = "display: flex; flex-wrap: wrap;">
      <?php
        $peoples = $pdo->query("SELECT * FROM peoples")->fetchALL(PDO::FETCH_ASSOC);
        //print_r($employees);
        foreach ($peoples as $people) {
          if ($people["id"]==0){
            continue;
          }
      ?>

      <div class = "col-sm-6 mb-3">
        <div class = "card">
          <div class = "card-body">
            <h5 class = "card-title text-center"><?= $people["Surname"]?> <?=$people["Name"]?> <?= $people["Patronym"]?></h5>
            <p class = "card-text"><?=$people["Description"]?></p>
            <div class = "image text-center">
             <img src = "uploads/<?=$people['img_dir']?>" width = "250px" height = "350px" class = "center">
            </div>
          </div>
        </div>
      </div>
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
1
0
40
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Этот ответ предполагает, что эта строка создает столбцы: <div class = "col-sm-6 mb-3">.

Bootstrap делит страницу на 12 колонок. "col-sm-6" займет 6 из этих 12.

Для 3 столбцов вы добьетесь большего успеха, используя класс "col-sm-4"

документ: https://getbootstrap.com/docs/4.0/layout/grid/

Другие вопросы по теме