【问题标题】:How to use cycle in django with two columns?如何在 django 中使用两列循环?
【发布时间】:2019-10-25 01:17:38
【问题描述】:

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

example 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  %}

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

【问题讨论】:

    标签: python html django twitter-bootstrap


    【解决方案1】:

    我认为你的循环只是在错误的地方。我认为您不需要为此使用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>
    

    本质上,您想为posts 中的每个post 添加一个新列。

    【讨论】:

    • 是的,你是对的。谢谢您的帮助。这解决了第一层问题,但还有第二层。我想在下面的第二部分中看到网站上的第三篇文章。怎么办?
    • 我发布的答案将呈现尽可能多的帖子,它将每行发布两个,然后跳到新的“行”。即使您有 15 个点,它也会显示所有点,一次显示两个。这是因为我们使用的是 col-lg-6,它是 Bootstrap 网格使用的每行 12 列的一半。
    • 对不起。确实你是对的。我在我的代码中犯了一个错误。再次感谢您的帮助:)
    猜你喜欢
    • 2021-12-23
    • 2020-12-07
    • 1970-01-01
    • 1970-01-01
    • 2022-10-23
    • 1970-01-01
    • 2018-04-28
    • 2021-04-22
    相关资源
    最近更新 更多