Php 使用边距时引导4网格混合

我正在使用php生成html代码。我在一个名为

$persons

的数组中存储了一些信息，我正在尝试为每个

$persons

生成一张引导卡：

<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>  

“alt=”“>

---

当我删除

m-1

类时，一切正常，但一旦我添加

m-1

类，margin会导致最后一个div转到下一行。我认为空间不足会导致这个问题。我如何解决这个问题？如何在div之间留有margin，而不让最后一个div转到下一行？

最简单的解决方法是t列中的另一个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>  

“alt=”“>

---

或者，如果您不想添加另一个div，只需将

m-1

类添加到

卡块

最简单的解决方案是在列中添加另一个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>  

“alt=”“>

---

或者，如果您不想添加另一个div，只需将

m-1

类添加到

卡块
您应该为
卡
创建一个单独的div，因为它是
显示：flex
。另外，只需将
my-1
用于
页边距顶部
和
页边距底部
，这样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>  


“alt=”“>


您应该为
卡设置一个单独的div，因为它是
显示：flex
。另外，只需将
my-1用于
页边距顶部
和
页边距底部
，这样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>  


“alt=”“>


这不是解决方案，如果我在div.card周围有一个边框呢？我实际上有一个边框（bootstrap 4 card的默认边框）那不是解决方案，如果我在div.card周围有一个边框呢？我实际上有一个边框（bootstrap 4 card的默认边框）