如何在引导程序中在列之间留出空间答案

【问题标题】：how to give space between columns which is one above the other in bootstrap如何在引导程序中在列之间留出空间
【发布时间】：2021-02-22 17:54:09
【问题描述】：

我有一个用引导程序完成的网站，其中我使用 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>

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

【问题讨论】：

标签： html css bootstrap-4 row spacing

【解决方案1】：

您可以为底部元素添加内边距。

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

这是唯一添加的 css：

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

此外，如果您想定位整个底部 div，您可以在 div 类上使用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>

【讨论】：