php - 使用边距时 bootstrap 4 网格混淆

Question

我正在使用 php 生成 html 代码。我有一些信息存储在一个名为 $persons 的数组中，我正在尝试为每个 $person 生成一张引导卡:

<div class="container">
  <div class="row">
    <?php foreach ($persons as $person): ?>
      <div class="card col-md-3 m-1">
      <img class="card-img-top" src="<?=person['img_src']?>" alt="<?=$person['name']?>">
      <div class="card-block">
        <h4 class="card-title"><?=$person['name']?></h4>
        <p class="card-text"><?=$person['info']?></p>
      </div>
    </div>
    <?php endforeach; ?>
  </div>
</div>  

当我删除 m-1 类时一切正常，但是一旦我添加 m-1 类，边距会导致最后一个 div 转到下一行。我认为空间不足会导致这个问题。我该如何解决这个问题？如何在不让最后一个 div 转到下一行的情况下在 div 之间留出边距？

Answer 1

card 应该有一个单独的 div，因为它是 display:flex。此外，只需将 my-1 用于 margin-top 和 margin-bottom，这样 x 轴空间就是没有影响...

<div class="container">
  <div class="row">
    <?php foreach ($persons as $person): ?>
      <div class="col-md-3 my-1">
      <div class="card">
      <img class="card-img-top" src="<?=person['img_src']?>" alt="<?=$person['name']?>">
      <div class="card-block">
        <h4 class="card-title"><?=$person['name']?></h4>
        <p class="card-text"><?=$person['info']?></p>
      </div>
      </div>
    </div>
    <?php endforeach; ?>
  </div>
</div>  

https://www.codeply.com/go/78AmkbWrLi