Question

我目前正在使用Python Flask和Bootstrap。我希望得到它，以便如果一行中有4张卡片，它将自动创建新行。

问题，我现在所拥有的职位越多，我获得的行卡越长且越薄。当前代码：

 {% extends "base.html" %}
{% block content %}
    <div class="card-deck">
        {# Go through each forum post #}
        {% for post in forum_posts.items %}

            <div class="card">
                <div class="card-body">
                    <span class="badge badge-info">{{ post.cat }}</span>

                    <h3 class="card-title"><a class="card-title"
                                              href="{{ url_for('forum_posts.view_post', forum_post_id=post.id) }}">{{ post.title }}</a>
                    </h3>
                    <h6 class="card-subtitle mb-2 text-muted">Written by: {{ post.author.username }}</h6>
                    <p>{{ post.text[:100] }}...</p>
                </div>
                <div class="card-footer">
                    <a href="{{ url_for('forum_posts.view_post', forum_post_id=post.id) }}"
                       class="btn btn-primary">Read
                        Blog Post</a>
                </div>
            </div>

        {% endfor %}
    </div>

{% endblock %}

Answer 1

您可以在python端对此进行编码，以便使用数组数组在jinja2中更轻松：

>>> arr = [0,1,2,3,4,.....,102]
>>> forum_posts.items = []
>>> for i in range(int(len(arr)/4)):
        j = i * 4
        forum_posts.items.append([arr[j], arr[j+1], arr[j+2], arr[j+3]])
        # needs an error trap for IndexError on 103

然后在jinja2中：您可以进行双循环：

{% for row in forum_posts.items %}
    {% for item in row %}
         {# HTML here for a new row of at most 4 cards #}

例如，如果新循环索引是4的精确倍数，则可以在jinja2中使用可变循环计数器并设置新行HTML来执行相同的操作：

{% for i, post in enumerate(forum_posts.items) %}
    {% if i % 4 == 0 %}
        {# new row code #}
    {% else %}
        {# regular row code %}
    {% endif %}
{% endfor %}

有没有办法以编程方式每行拥有4张卡？

1 个答案: