引导程序在卡行之间添加空间

Question

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

<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）

这就是我得到的：

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

Answer 1

也许可以尝试为行容器添加样式并将其设置为margin-bottom="5px"。 像这样：

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