Django模板遍历列表实现每行3列布局的最优解决方案是什么？

问题原因 #

你当前的代码问题出在行闭合标签的判断逻辑错误：在每轮循环满足forloop.counter0为0或整除3的同时，既打开行标签也关闭行标签，导致每行实际只会包裹1个卡片，剩下的卡片没有行容器包裹，无法形成预期的3列布局。

最优实现方案（最推荐，无需手动判断行闭合） #

你使用的Bootstrap框架自带网格自动换行能力，完全不需要手写复杂的循环判断逻辑。Bootstrap每行默认12等分，3列布局只需给每个列设置col-sm-4（每列占4份宽度），所有列放在同一个row容器中即可，超出3个的元素会自动换行，代码简洁不易出错。

{% extends "stockwatcher/base.html" %}
{% block content %}

<div class="container">
  <div class="row">
    {% for stock in stocks %}
    <div class="col-sm-4 mb-3">
      <div class="card text-white bg-info" style="max-width: 18rem;">
        <div class="card-header">{{stock.transaction_date}}</div>
        <div class="card-body">
          <h5 class="card-title">{{ stock.id }} {{stock.ticker}} </h5>
          <p class="card-text">{{stock.senator}} - {{stock.type}}</p>
        </div>
      </div>
    </div>
    {% endfor %}
  </div>
</div>

{% endblock content %}

手动控制行开闭合方案（仅适合需要给每行加特殊样式的场景） #

如果确实需要单独给每行设置样式，可以修正判断逻辑：索引整除3时打开行，遍历到每组第3个元素或者最后一个元素时关闭行，同时兼容最后一行不足3个元素的场景。

{% extends "stockwatcher/base.html" %}
{% block content %}

<div class="container">
  {% for stock in stocks %}
    {% if forloop.counter0|divisibleby:3 %}
    <div class="row">
    {% endif %}
    <div class="col-sm">
      <div class="card text-white bg-info mb-3" style="max-width: 18rem;">
        <div class="card-header">{{stock.transaction_date}}</div>
        <div class="card-body">
          <h5 class="card-title">{{ stock.id }} {{stock.ticker}} </h5>
          <p class="card-text">{{stock.senator}} - {{stock.type}}</p>
        </div>
      </div>
    </div>
    {% if forloop.counter|divisibleby:3 or forloop.last %}
    </div> 
    {% endif %}
  {% endfor %}
</div>

{% endblock content %}

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