如何在 bootstrap 中的列之间给出 space

Question

我在bootstrap中完成了一个网站，其中我使用PHP列出了一些数据，所以我有18个类别，18个类别列在一行中的列中，其代码如下所示：

<div class="row">
  <?php foreach($categories as $val){?>
  <div class="col-xl-2 col-sm-6">
    <div class="card bg-card-light bg-primary-card bg-white">
      <div class="card-body">
        <div class="cat-item text-center">
          <a href="<?= base_url();?>categories?category=<?= $val->category_name?>"></a>
          <div class="cat-icon bg-primary-transparent brround text-primary">
            <!-- <i class="fa fa-hospital-o"></i> -->
            <img src="<?= base_url()?>uploads/categoryicon/<?= $val->category_icon?>">
          </div>
          <div class="cat-desc">
            <h5 class="mb-2">
              <?= $val->category_name?>
            </h5>
          </div>
        </div>
      </div>
    </div>
  </div>
  <?php }?>



</div>

正如你在这张照片中看到的，第一个列组和第二个列组彼此非常接近，谁能告诉我如何在它们之间设置间距。提前致谢

Answer 1

您可以向底部元素添加填充。

我使用您的代码添加了一个片段，并使用了示例图像和文本。

这是唯一的 css 添加：

.mb-2 {
padding-top: 30px;
background-color: black;
color: white;
}

此外，如果您想定位整个底部 div，您可以在 div class 上使用 margin，如下所示：

.cat-desc {
margin-top: 30px;
background-color: black;
color: white;
}

.mb-2 {
padding-top: 30px;
background-color: black;
color: white;
}

<div class="row">
  <?php foreach($categories as $val){?>
  <div class="col-xl-2 col-sm-6">
    <div class="card bg-card-light bg-primary-card bg-white">
      <div class="card-body">
        <div class="cat-item text-center">
          <a href="<?= base_url();?>categories?category=<?= $val->category_name?>"></a>
          <div class="cat-icon bg-primary-transparent brround text-primary">
            <!-- <i class="fa fa-hospital-o"></i> -->
            <img src="https://cdn.pixabay.com/photo/2020/08/25/18/28/workplace-5517744__340.jpg">
          </div>
          <div class="cat-desc">
            <h5 class="mb-2">
              Bottom
            </h5>
          </div>
        </div>
      </div>
    </div>
  </div>
  <?php }?>



</div>

如何在 bootstrap 中的列之间给出 space

how to give space between columns which is one above the other in bootstrap

html

css

row

spacing

bootstrap-4