时间戳

首页 > 解决方案 > 如何在 django 中使用两列循环？

python - 如何在 django 中使用两列循环？

问题描述

我创建了一个分为两列的部分。每列代表一个博客条目。不幸的是，目前为两列分配了一个相同的条目，它们将是两个独立的。在这种情况下，我不太明白如何正确使用循环标签。

例如 http://imgbox.com/NWO7qA7S

我使用 bootstrap 4 和 django 2.2 框架来创建页面。我尝试了各种组合，但我不清楚循环标签的操作。

{% for post in posts %}

<section class="bg-light py-5" id="aktualnosci">
    <div class="container">
        <h1>Informacje o zmianach w prawie podatkowym</h1>
        <div class="divider"></div>
        <p class="text-paragraph pt-3">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam iure consectetur accusantium delectus, iusto culpa mollitia eum molestiae at? Ab!</p>
        <div class="row py-3">

    <!-- FIRST POST -->

            <div class="col-lg-6">
                <div class="news-card">
                    <div class="text-center text-white bg-blue d-flex align-items-center news-card-date">
                        <div class="mx-auto news-card-date-body w-75">
                            <i class="far fa-calendar-alt d-none d-block mx-auto"></i>
                            <span class="d-block news-card-date-value mt-1">{{ post.published }}</span>
                        </div>
                    </div>
                    <div class="news-card-body">
                        <div class="news-card-img">
                <img class="img-fluid" src="{% static 'main/images/126.jpg' %}" alt="">
                        </div>
                        <div class="news-card-content">
                            <div class="news-card-content-inner">
                                <h2>{{ post.title }}</h2>
                                <p class="text-paragraph">{{ post.lead }}</p>
                                <a class="pb-2" href="#">Czytaj więcej</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

    <!-- SECOND POST -->

            <div class="col-lg-6">
                <div class="news-card">
                    <div class="text-center text-white bg-blue d-flex align-items-center news-card-date">
                        <div class="mx-auto news-card-date-body w-75">
                            <i class="far fa-calendar-alt d-none d-block mx-auto"></i>
                            <span class="d-block news-card-date-value mt-1">{{ post.published }}</span>
                        </div>
                    </div>
                    <div class="news-card-body">
                        <div class="news-card-img">
                <img class="img-fluid" src="{% static 'main/images/287.jpg' %}" alt="">
                        </div>
                        <div class="news-card-content">
                            <div class="news-card-content-inner">
                                <h2>{{ post.title }}</h2>
                                <p class="text-paragraph">{{ post.lead }}</p>
                                <a class="pb-2" href="#">Czytaj więcej</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <a class="pt-2" href="{% url 'posts:posts_list'  %}">Zobacz wszystkie &gt; &gt; </a>
    </div>
</section>

{% endfor  %}

我目前在两个专栏中都收到重复的一篇帖子。最终，我想在一个部分的两列中收到两个不同的帖子。接下来，我想在创建第三个条目时添加第二个部分。

标签： pythonhtmldjangotwitter-bootstrap

解决方案

我认为你的循环只是在错误的地方。我认为您不需要为此使用cycle标签。

尝试这个：

<section class="bg-light py-5" id="aktualnosci">
    <div class="container">
        <h1>Informacje o zmianach w prawie podatkowym</h1>
        <div class="divider"></div>
        <p class="text-paragraph pt-3">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam iure consectetur accusantium delectus, iusto culpa mollitia eum molestiae at? Ab!</p>
        <div class="row py-3">
            {% for post in posts %}
            <div class="col-lg-6">
                <div class="news-card">
                    <div class="text-center text-white bg-blue d-flex align-items-center news-card-date">
                        <div class="mx-auto news-card-date-body w-75">
                            <i class="far fa-calendar-alt d-none d-block mx-auto"></i>
                            <span class="d-block news-card-date-value mt-1">{{ post.published }}</span>
                        </div>
                    </div>
                    <div class="news-card-body">
                        <div class="news-card-img">
                <img class="img-fluid" src="{% static 'main/images/126.jpg' %}" alt="">
                        </div>
                        <div class="news-card-content">
                            <div class="news-card-content-inner">
                                <h2>{{ post.title }}</h2>
                                <p class="text-paragraph">{{ post.lead }}</p>
                                <a class="pb-2" href="#">Czytaj więcej</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
        <a class="pt-2" href="{% url 'posts:posts_list'  %}">Zobacz wszystkie &gt; &gt; </a>
    </div>
</section>

本质上，您想为每个postin添加一个新列posts。

推荐阅读