如何在引导卡之间添加间隙答案

【问题标题】：How to add gaps between the bootstrap cards如何在引导卡之间添加间隙
【发布时间】：2021-05-17 15:21:28
【问题描述】：

我是 Bootstrap 的新手。我正在尝试将图像添加为卡片。但是我面临一些问题，因为卡片一个接一个地堆叠在一起，没有空格。下面是 Bootstrap4 的代码。

<body>
<div class="container-fluid">
    <div class="row">
        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 card">
            <a href="#" class="">
                Beautiful
                <img class="img-fluid " src="https://upload.wikimedia.org/wikipedia/en/2/25/Bazzi_-_Beautiful.jpeg" alt="" srcset="">
            </a>
        </div>

        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 card ">
            <a href="#">
                Beautiful
                <img class="img-fluid" src="https://upload.wikimedia.org/wikipedia/en/e/e4/Beautiful_Bazzi_Camila_Cabello_Single.png" alt="" srcset="">
            </a>
        </div>

        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 card ">
            <a href="#" class="">
                Beautiful
                <img class="img-fluid" src="https://upload.wikimedia.org/wikipedia/en/2/25/Bazzi_-_Beautiful.jpeg" alt="" srcset="">
            </a>
        </div>

        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 card">
            <a href="#">
                Beautiful
                <img class="img-fluid" src="https://upload.wikimedia.org/wikipedia/en/e/e4/Beautiful_Bazzi_Camila_Cabello_Single.png" alt="" srcset="">
            </a>
        </div>

        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 card ">
            <a href="#" class="">
                Beautiful
                <img class="img-fluid " src="https://upload.wikimedia.org/wikipedia/en/2/25/Bazzi_-_Beautiful.jpeg" alt="" srcset="">
            </a>
        </div>

        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 card ">
            <a href="#">
                Beautiful
                <img class="img-fluid" src="https://upload.wikimedia.org/wikipedia/en/e/e4/Beautiful_Bazzi_Camila_Cabello_Single.png" alt="" srcset="">
            </a>
        </div>
    </div>
</div>

上面的代码在屏幕卡是一个接一个的堆叠，没有空间。

我尝试使用mr-1，但第四张卡片将其包装到另一行。

如何在上下等距的卡片之间添加空格？

【问题讨论】：

使用margin css 属性
this 看起来相关...
@xdhmoore 与“mt-1”不一样，如我的示例所示，它不起作用
@ShanieMoonlight Margin 正在将第四张卡片包装到另一行。
也发布你的css

标签： css twitter-bootstrap bootstrap-4

【解决方案1】：

这是因为您在同一个元素上使用了.col-* 和.card。尝试养成将内容元素放在布局网格元素中的习惯。

<div class="container-fluid">
  <div class="row">
    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
      <div class="card m-1">
        <a href="#" class="">
          Beautiful
          <img class="img-fluid " src="https://upload.wikimedia.org/wikipedia/en/2/25/Bazzi_-_Beautiful.jpeg" alt="" srcset="">
        </a>
      </div>
    </div>

    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
      <div class="card m-1">
        <a href="#">
          Beautiful
          <img class="img-fluid" src="https://upload.wikimedia.org/wikipedia/en/e/e4/Beautiful_Bazzi_Camila_Cabello_Single.png" alt="" srcset="">
        </a>
      </div>
    </div>

    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
      <div class="card m-1">
        <a href="#" class="">
          Beautiful
          <img class="img-fluid" src="https://upload.wikimedia.org/wikipedia/en/2/25/Bazzi_-_Beautiful.jpeg" alt="" srcset="">
        </a>
      </div>
    </div>

    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
      <div class="card m-1">
        <a href="#">
          Beautiful
          <img class="img-fluid" src="https://upload.wikimedia.org/wikipedia/en/e/e4/Beautiful_Bazzi_Camila_Cabello_Single.png" alt="" srcset="">
        </a>
      </div>
    </div>

    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
      <div class="card m-1">
        <a href="#" class="">
          Beautiful
          <img class="img-fluid " src="https://upload.wikimedia.org/wikipedia/en/2/25/Bazzi_-_Beautiful.jpeg" alt="" srcset="">
        </a>
      </div>
    </div>

    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
      <div class="card m-1">
        <a href="#">
          Beautiful
          <img class="img-fluid" src="https://upload.wikimedia.org/wikipedia/en/e/e4/Beautiful_Bazzi_Camila_Cabello_Single.png" alt="" srcset="">
        </a>
      </div>
    </div>
  </div>
</div>

【讨论】：

【解决方案2】：

我使用 Bootstrap 4 Emdeds Utilities 解决了这个问题

https://getbootstrap.com/docs/4.3/utilities/embed

在这种情况下，您只需将图像添加到 div.embbed-responsive 中，如下所示：

<div class="card"><div class="embed-responsive embed-responsive-16by9"> <img alt="Card image cap" class="card-img-top embed-responsive-item" src="img/butterPecan.jpg" /></div><div class="card-block"><h4 class="card-title">Butter Pecan</h4><p class="card-text">Roasted pecans, butter and vanilla come together to make this wonderful ice cream</p></div></div>

或.card-img-top {width: 100%;}

【讨论】：