Bootstrap 4 引导在卡行之间添加空间

我正在尝试使用以下代码在引导网格中显示卡片列表：

<div class="container">
    <div class="row hidden-md-up">
        {% for shop in shops %}
            <div class="col-md-3">
                <div class="card">
                    {% if shop.image %}
                        <img src="{{shop.image.url}}" style="height:150px;" alt="Card image cap">
                    {% endif %}
                    <div class="card-body">
                        <p>
                            <b>{{shop.title}}</b><br>
                            <i class="material-icons">location_on</i> <b>{{shop.distance }} km away</b><br>
                            <a href="/like/{{shop.id}}"><i class="material-icons">thumb_up</i> Like</a><br>
                            <a href="/unlike/{{shop.id}}"><i class="material-icons">thumb_down</i> Unlike</a>
                         </p>
                    </div>
                </div>
            </div>
        {% endfor %}
    </div>
</div> 

我使用col-md-3显示每行4张卡12/3=4

这就是我得到的：

---

如您所见，每张卡片之间都有空格，但每行之间没有空格。

也许可以尝试向行容器添加样式，使其边距底部为5px。 比如：

<div style="margin-bottom:5px">;

---

我在col-md-3div中添加了边距底部：40px，它成功了。谢谢。没问题。我很高兴它能工作。那个5px只是一个例子：您可以使用默认的引导程序4类mt-5来处理您的行，比如。。这里mt是利润率最高的，您可以根据需要使用百分比mt-*这里我给它5。。