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

最简单的解决方案是在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

Answer 2

card，display:flex应该有一个单独的div。my-1。此外，仅对margin-top和margin-bottom使用<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> ，以便x轴空间不受影响......

{{1}}

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

使用保证金时，bootstrap 4网格混乱

2 个答案: