Django Bootstrap 卡组如果 forloop 可整除

Question

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

     <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 %}          

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>

Answer 2

如果万一您的显示器是固定的，或者您强制想要每行 5 张卡，此解决方案将确保单行限制 5 张卡。

<div class="row">
  {% for each_card_data in card_data %}

    <!-- card -->
    <div class="column">
     <p>{{each_card_data.title}}</p>
    </div>
    <!-- card end -->

    {% if forloop.counter|divisibleby:"5" %}
        </div>
        <div class="row">
              <br><br><br><br><br>
    {% endif %}
  {% endfor %}
</div>

说明：假设有七张牌。对于第一张卡，它将运行并且不会转到

for loop counter if condition

。对于第二张卡、第三张卡、第四张卡；它不会去

for loop counter if condition

。对于第五张卡，它将转到

for loop counter if condition

，因为它可以被 5 整除。当它进入

for loop counter if condition

对于第五张卡时，它将以结束 div 标签结束行 div 并创建一个新行div 开头行 div 标签。这将创建一个新行。 第六张卡将从新行开始。对于第七张卡，它不会转到for loop counter if condition

并关闭主行标签。

参考：

Github Sumit 电子商务项目