Создайте таблицу, которая будет автоматически перемещаться в новую строку после третьего столбца, используя jinja2 и Flask - PullRequest
Новая
       22

Создайте таблицу, которая будет автоматически перемещаться в новую строку после третьего столбца, используя jinja2 и Flask

0 голосов
/ 22 апреля 2020

У меня есть база данных, заполненная группами, которые создаются пользователями для публикации на темы по их выбору. Эти группы будут иметь подразделы, в которые пользователи могут go заходить и публиковать / комментировать и т.д. c. Я создал панель инструментов, которая отображает доступные на данный момент группы и позволяет пользователям создавать свои собственные.

Проблема, с которой я столкнулся, заключается в том, что я хотел бы, чтобы группы появлялись в столбцах по 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>

Любая помощь с этим будет оценена.

1 Ответ

0 голосов
/ 22 апреля 2020

Не берите в голову 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>
...