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

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

有一种方法可以在 jinja2 中使用可变循环计数器并设置新行来做同样的事情 HTML 如果新循环索引是 4 的整数倍：

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

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

Is there a way to programmatically have 4 cards per row?

flask

python-3.x

flask-wtforms

bootstrap-4