3 列卡片连续 bootstrap

Question

我想连续显示3列卡片，但它只显示2列。我正在使用 bootstrap 和 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>

Answer 1

此响应假设此行创建了列：<div class="col-sm-6 mb-3">.

Bootstrap 将页面分成 12 列。 “col-sm-6”将从 12 个中取出 6 个。

对于 3 列，使用 class "col-sm-4"

会取得更好的成功

文档：https://getbootstrap.com/docs/4.0/layout/grid/

3 列卡片连续 bootstrap

3 columns cards in a row with bootstrap

html

css

bootstrap-5