Django模板中Bootstrap循环渲染卡片的间距调整问题

这问题我碰到过好几次，Bootstrap的卡片布局默认确实不会自动添加垂直间距，给你两个简单又符合Bootstrap规范的解决方案：

1. 给卡片添加底部外边距（最直接兼容的方案） #

在你的card元素上加上Bootstrap的间距类，比如mb-3（中等间距）或者mb-4（更大间距）。这样不管是桌面端换行后的行间距，还是移动端垂直排列的卡片间距，都能轻松搞定。

修改后的核心代码片段：

<div class="col-sm-4">
  <div class="card mb-3"> <!-- 这里新增了mb-3类，同时建议去掉固定width让卡片自适应列宽 -->
    <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>
    <!-- 剩余卡片内容保持不变 -->
  </div>
</div>

补充：如果一定要保留卡片固定宽度，也可以继续用style="width: 18rem;"，但更推荐让卡片自适应列宽，这样更贴合Bootstrap的响应式设计逻辑。

2. 给Row添加Gap间距（Bootstrap 5专属简洁方案） #

如果你用的是Bootstrap 5及以上版本，可以直接在row上使用g-*类来设置列间隙，这个间隙会同时作用于水平和垂直方向，一次性解决行内卡片间距和行之间的间距问题。

修改后的Row代码：

<div class="container">
  <div class="row g-4"> <!-- 这里新增了g-4类，代表间隙大小为1.5rem -->
    {% for security in securities %}
      <div class="col-sm-4">
        <div class="card"> <!-- 同样建议去掉固定width -->
          <!-- 卡片内容保持不变 -->
        </div>
      </div>
    {% endfor %}
  </div>
</div>

注意：这个方法只适用于Bootstrap 5，如果你还在使用Bootstrap 4，建议优先用第一种方案。

内容的提问来源于stack exchange，提问作者stefvr