使用边距时引导 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 类，margin 会导致最后一个 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

Answer 2

最简单的解决方案是在 col 中放置另一个 div，它会应用边距：

<div class="container">
  <div class="row">
    <?php foreach ($persons as $person): ?>
      <div class="card col-md-3">
        <div class="m-1"> <!-- NEW -->
          <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>  

或者，如果您不想添加另一个 div，只需将 m-1 类添加到 card-block。