1.循环当前为每个项目创建了一个新的row，这就是为什么每张卡都在堆叠。它应该只循环col，而不是row。

1. col-sm-3表示“在sm及以上时每列使用3/12空格”，这意味着在sm断点及以上时有4列（不是3列）。使用col-sm-4可在sm及以上时每行显示3张卡，或者如果您希望每行始终显示3张卡，则只需使用col-4。

{% extends 'base_content.html' %}
{% block content %}

<!-- don't loop here -->
<div class="row justify-content-center">

  <!-- only loop the columns -->
  {% for item in CATEGORY_CHOICES %}
  <div class="col-sm-4"> <!-- not "col-sm-3" -->
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">{{ item.1 }}</h5>
      </div>
    </div>
  </div>
  {% endfor %}

</div>

{% endblock %}