使用jinja2和Flask创建一个表,该表将自动下降到第三列之后的新行中

问题描述 投票:0回答:1

我有一个数据库,其中填充了用户创建的网上论坛,用于发布有关他们选择的主题的信息。这些组将具有用户可以进入的小节以及可以发表/评论等。我制作了一个仪表板,显示了当前可用的组,并允许用户创建自己的组。

我的问题是我希望这些组出现在3列中,然后放到新的一行并重复。我目前拥有它,因此返回的每个结果都需要整行,但是这对Web设计而言并没有多大作用,因此我希望它显示在下一行。

下面是我当前拥有的代码(我在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> 

对此将提供任何帮助。

python flask jinja2 templating
1个回答
0
投票

不要介意内联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>
© www.soinside.com 2019 - 2024. All rights reserved.