引导程序在卡行之间添加空间[重复]

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">;