как применить flex к шаблону django

Question

как применить flex к шаблону django Я хочу применить flex к Django и изменить его, как показано ниже

{% if object_list.exists %}
        {% for p in object_list %}
            <div class="d-flex flex-wrap">
                <div class="col-md-10"> <!-- sm,md,lg -->
                    <div class="card">
                        <div class="card-body">
                            <span class="card-title">{{p.title}}</span>
                            <a href="{% url 'challenge:lecinfo_list_for_challenge' p.title %}" class="btn btn-primary">go</a>
                        </div>
                    </div>
                </div>
            </div>
        {% endfor %}
{% else %}
    <tr>
        <td colspan="">
            <h4>no subject!</h4>
        </td>
    </tr>
{% endif %}

Я хочу изменить вот так https://codepen.io/trufa/pen/rmwLzJ

Answer 1

Bootstrap будет достаточно для этого. Вам понадобится тег строки <div class="row"> вне {% for p in object_list %} и внутренний <div class="col-sm-3">. возможно, вы захотите увидеть this

. Вам нужно будет реструктурировать свой код примерно так. Чтение Параметры сетки

{% if object_list.exists %}
<div class="row">
    {% for p in object_list %}
        <div class="d-flex flex-wrap">
            <div class="col-md-3"> <!-- sm,md,lg -->
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">{{p.title}}</h5>
                        <p class="card-text">{{p.description}}</p>
                        <a href="{% url 'challenge:lecinfo_list_for_challenge' p.title %}" class="btn btn-primary">go</a>
                    </div>
                </div>
            </div>
        </div>
    {% endfor %}
</div>
{% else %}
    <tr>
        <td colspan="6">
            <h4>no subject!</h4>
        </td>
    </tr>
{% endif %}