Django引导卡组如果forloop可除
我正在尝试使用引导卡。但我有问题。 当我添加新的帖子作为一张卡片显示时,我显示了超过5张,它们开始扭曲。 我尝试使用forloop计数器在每次显示超过5张卡时启动新行。 但是我做错了什么。我什么都读,到处都是一样的。但我肯定我做错了Django引导卡组如果forloop可除,django,for-loop,bootstrap-4,counter,Django,For Loop,Bootstrap 4,Counter,我正在尝试使用引导卡。但我有问题。 当我添加新的帖子作为一张卡片显示时,我显示了超过5张,它们开始扭曲。 我尝试使用forloop计数器在每次显示超过5张卡时启动新行。 但是我做错了什么。我什么都读,到处都是一样的。但我肯定我做错了 <div class="card-deck"> {% for post in post_list %} {% if forloop.counter0|divisibleby:3 %} <div class="c
<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 %}
{post_list%}中的post为%
{%if-forloop.counter0 | divisibleby:3%}
标题
{{post.title}}
{{post.content|slice::200}
{%endif%}
{%endfor%}
现在你只看到第三张牌(因为“可分割的B:3”)。我不确定您想要实现什么,但是如果您想要显示所有卡片,有几个选项。其中两个是卡片组()和卡片组(),但当卡片数量越来越多时,它们确实会变得混乱。我成功使用的一个解决方案是使用Bootstrap的网格。当视口较小或卡片数量较大时,卡片将自动换行到下一行。下面的代码应该可以工作(尚未测试):
div class=“容器流体”>
{post_list%}中的post为%
标题
{{post.title}}
{{post.content|slice::200}
{%endfor%}
我想你只渲染第三篇文章?你会怎么做新行?是的,我希望渲染每3-4篇文章。现在它只渲染了两个帖子。就这样。我想我没有正确理解你。对不起。我希望所有的职位。分成几行。3-4个柱(卡)排成一行。然后在下面张贴(卡片)。如果那对你有意义的话,谢谢你,伙计。有人告诉我这是一个解决办法。使用此参数执行此操作。我是个新手。只是学习。现在可以了。谢谢很抱歉,我不能加上你的答案,因为我没有足够的分数。
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>