bootstrap：for循环中的卡片[重复]

Question

我尝试使用 Bootstrap 中的卡片在数据库中显示来自不同股票的一些信息。我正在使用 DJANGO 的模板引擎，并且已经有了下面的代码。在桌面上，三张牌后显示新行，但第一行和第二行之间没有空格。 当在移动设备上显示时，所有卡片都在彼此下方，但同样没有空间。 如何在卡片之间添加一些额外的空间？

<div class="container">
<div class="row">
        {% for security in securities %}
            <div class="col-sm-4">
                <div class="card" style="width: 18rem;">
                  <img src="{% static "public/engie.jpg" %}" class="card-img-top" alt="...">
                  <div class="card-body">
                    <h5 class="card-title">{{ security.name }}</h5>
                    <p class="card-text">Text here</p>
                  </div>
                  <ul class="list-group list-group-flush">
                    <li class="list-group-item">{{ security.quote }}</li>
                    <li class="list-group-item">{{ security.lastchange_pct }}</li>
                    <li class="list-group-item">{{ security.remarks }}</li>
                  </ul>
                  <div class="card-body">
                    <a href="#" class="card-link">Card link</a>
                    <a href="#" class="card-link">Another link</a>
                  </div>
                </div>
            </div>
        {% endfor %}

Answer 1

为您的类添加边距或创建一个带有边距的新类或将其写入<div style="col-sm-4"> 的样式属性中。

<div class="container">
<div class="row">
        {% for security in securities %}
            <div class="col-sm-4 card-space">
                <div class="card" style="width: 18rem;">
...

在您的 css 文件中：

.card-space {
  margin-bottom: 20px; 
}

或者更好地使用bootstrap spacing classes，例如

<div class="container">
<div class="row">
        {% for security in securities %}
            <div class="col-sm-4 mb-3">
                <div class="card" style="width: 18rem;">

还可以看看@Tim Vermaelen 的this solution：