如何使用 css 在 for 循环内的 django 模板中添加样式？

Question

我正在制作一个简单的博客项目，我试图在其中使用 for 循环模板标记注入每个帖子的数据。但是在这样做时，当在博客列表模板上应用 css 时，网格会变得扭曲。然而，当在单独的 Html 页面中手动添加的帖子上进行测试时，此 CSS 工作得很好。

如何解决这个问题，因为大多数在普通 Html 页面上运行良好的 css 在与 django 模板结合使用时无法正常运行。

这是我的基本博客文章模板：

{% extends 'basic_app/base.html' %}

{% block content %}

<div class="centerstage">

    {% for post in post_list %}

    <div class="cards">

      <div class="card">

        <img class="card__image" src="{{ post.blog_pic.url }}" alt="">

        <div class="card__content">

          <p>

            <a href="{% url 'post_detail' pk=post.pk %}">{{ post.title }}</a>

          </p>

          <p>

            {{ post.text|safe|linebreaksbr }}

          </p>

        </div>

        <div class="card__info">

          <div>

            <i class="material-icons">{{ post.published_date|date:"D M Y"}}</i>310

          </div>

          <div>

            <a href="{% url 'post_detail' pk=post.pk %}" class="card__link">Comments: {{ post.approve_comments.count }}</a>

          </div>

        </div>

      </div>

    </div>

    {% endfor %}

</div>

{% endblock %}

Answer 1

您的 for 循环.cards在您的 django 模板中循环，它.cards为 post_list 中的每个帖子创建一个新的。您的 css 运行良好，为.cards您在 html 中拥有的每个创建一个网格，但.card内部只有一个。由于您.card不在同一个.cards目录中，因此您的 css 网格系统无法正常工作。把你的<div class="cards">之前（当然之后关闭它）放在你的 for 循环中，它会很好地工作。