时间戳

首页 > 解决方案 > 使用 jinja2 和 Flask 创建一个表，该表将在第三列之后自动下降到新行

python - 使用 jinja2 和 Flask 创建一个表，该表将在第三列之后自动下降到新行

问题描述

我有一个数据库，其中包含用户创建的组，用于发布他们选择的主题。这些组将具有用户可以进入和发布/评论等的子部分。我制作了一个仪表板，显示当前可用的组并允许用户创建自己的组。

我遇到的问题是我希望这些组出现在 3 列中，然后放到新行并重复。我目前拥有它，因此返回的每个结果都占用一整行，但这对网页设计没有多大作用，所以我希望它出现在下一行。

以下是我目前拥有的代码（我在 app.py 文件中定义）：

     <div class="row"> 
        {% for group in groups %}
            {% if i == 2 %}
                </div>
                {% set i = 0 %}   
            {% else %} 
                    <div class="col-sm-4">
                        <h2>{{group[0]}}</h2>
                        <p>{{group[1]}}</p>
                    </div> 
                {% set i = i+1 %}
            {% endif %}
        {% endfor %}
    </div>

对此的任何帮助将不胜感激。

标签： pythonflaskjinja2templating

解决方案

不要介意内联css和其他暴行。将其保存到 html 文件中并在浏览器中打开。

<style type="text/css">
    #groups {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-gap: : 1em;
    }
</style>

<body>
    <div id="groups">
        <div>group1</div>
        <div>group2<div>foo is nested</div>
        </div>
        <div>group3</div>
        <div>group4</div>
    </div>
</body>

应用于您的模板，类似于：

<div id="groups">
    {% for group in groups %}
        <div class="class_to_style_a_group">
            <h2>{{group[0]}}</h2>
            <p>{{group[1]}}</p>
        </div> 
    {% endfor %}
</div>

推荐阅读