如何为循环引导网格

Question

我正在尝试使其如下所示：https://getbootstrap.com/docs/4.3/examples/pricing/ 它显示了分为三个部分的屏幕 所以我想应该是这样的...

 <div class="row mb-2">
            <div class="col-4 bg-danger">
                .col-4
            </div>
            <div class="col-4 bg-warning">
                .col-4
            </div>
            <div class="col-4 bg-success">
                .col-4
            </div>
        </div>

但是问题是我正在使用django jinja模板和for循环。因此将所有内容分组。

这是我的代码，但不会执行链接中的操作

<div class="row">
  <div class="col-6 col-md-4">
        <div class="card">
        {% for all_episode in episode %}
        <a href="{% url 'episode_detail' slug=all_episode.slug %}"><img class="card-img-top" src='{{all_episode.image.url}}'></a>
            <div class="card-body">
                <h5 class="card-title">
                  <a href="{% url 'episode_detail' slug=all_episode.slug %}">{{ all_episode.title }}</a>
                </h5>
                <p class="card-text">{{ all_episode.story |slice:":100" }}...</p>
            </div>

<div class="card-footer">
                <small class="text-muted">
                  <span class="h5">
                  <a href="{% url 'series_detail' slug=all_episode.series.slug %}">{{ all_episode.series }}</a>
                </span> / 
            <span class="h6"><a href="{% url 'season_detail' slug=all_episode.season.slug %}">{{ all_episode.season }}</a></span></small>
            </div>
        {% endfor %}




    </div>
  </div>