Django Bootstrap 卡片组 if forloop divisibleby

Question

我正在尝试使用引导卡。但我有问题。 当我添加新帖子以显示为卡片时，我显示超过 5 个，它们开始挤压。 每次显示超过 5 张卡片时，我都会尝试使用 forloop 计数器开始新行。 但我做错了什么。我读了所有的东西，到处都是一样的。但我肯定做错了。

     <div class="card-deck">
    {% for post in post_list %}
    {% if forloop.counter0|divisibleby:3 %}
      <div class="card border-primary mb-3" style="max-width: 20rem;">
          <a href="{% url 'post_detail' post.slug  %}">
              <img style="height: 200px; width: 100%; display: block;" src="{{ post.thumb.url }}" alt="Card image"></a>
                  <div class="card-header">Header</div>
                      <div class="card-body">
                      <h4 class="card-title">{{ post.title }}</h4>
                      <p class="card-text">{{post.content|slice:":200" }}</p>
                      </div>
      </div>   {% endif %}    
  </div>      
 </div>  {% endfor %}          

Reference image

Answer 1

现在您只能看到每三张卡片（因为“divisibleby:3”）。我不确定你想要达到什么目标，但如果你想显示所有卡片，有几个选项。其中两个是卡片组（https://getbootstrap.com/docs/4.0/components/card/#card-groups）和卡片组（https://getbootstrap.com/docs/4.0/components/card/#card-decks），但当卡片数量越来越多时，它们确实会变得混乱。我成功使用的一个解决方案是使用 Bootstrap 的网格。当视口较小或卡片数量较大时，卡片将自动换行到下一行。下面的代码应该可以工作（还没有测试过）：

div class="container-fluid">
    <div class="row">
        {% for post in post_list %}
            <div class="col-auto">
                <div class="card border-primary mb-3">
                    <a href="{% url 'post_detail' post.slug  %}">
                        <img style="height: 200px; width: 100%; display: block;" src="{{ post.thumb.url }}" alt="Card image">
                    </a>
                    <div class="card-header">
                        Header
                    </div>
                    <div class="card-body">
                        <h4 class="card-title">{{ post.title }}</h4>
                        <p class="card-text">{{ post.content|slice:":200" }}</p>
                    </div>
                </div>
            </div>
        {% endfor %}
    </div>
</div>