如何通过模板循环实现每行3个Bootstrap卡片布局？

我希望实现每行展示3个Bootstrap卡片的布局（效果参考：每行横向排列3个卡片，整齐对齐），但目前我的代码中卡片是逐个垂直排列的。现有代码如下，请问该如何修改以实现目标？

{% extends 'base_content.html' %}
{% block content %}
{% for item in CATEGORY_CHOICES %}
<div class="row" style="justify-content: center;">
<div class="col-sm-3">
  <div class="card">
    <div class="card-body">
      <h5 class="card-title">{{ item.1 }}</h5>
      </div>
    </div>
  </div>
</div>
{% endfor %}
{% endblock %}

修改方案 #

你的问题核心是循环内重复创建了row容器，导致每个卡片单独占据一行。按照Bootstrap栅格系统的规则调整即可：

{% extends 'base_content.html' %}
{% block content %}
<div class="row justify-content-center">
  {% for item in CATEGORY_CHOICES %}
  <div class="col-sm-4 mb-3">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">{{ item.1 }}</h5>
      </div>
    </div>
  </div>
  {% endfor %}
</div>
{% endblock %}

修改说明 #

1. 统一行容器：将<div class="row">移到循环外部，让所有卡片共享同一个行容器，Bootstrap会自动按12列规则换行
2. 调整列宽：把col-sm-3改为col-sm-4——因为Bootstrap栅格是12列布局，每行3个卡片时，每个卡片需要占4列（12÷3=4）
3. 优化间距：添加mb-3类给列容器，增加卡片之间的垂直间距，提升视觉舒适度
4. 规范样式写法：移除行内样式style="justify-content: center;"，改用Bootstrap内置的justify-content-center类，符合框架最佳实践

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