Воссоздание макета строк карточек bootstrap с помощью tailwind в django


. Я пытаюсь воссоздать макет строки карточек bootstrap с помощью Tailwind в рамках фреймворка django

enter image description here

БЛОКАТОР
. Однако попытка попутного ветра приводит к результату ниже
enter image description here

index.html -- bootstrap

{% extends 'base.html' %}

{% block title %}Home{% endblock title %}

{% block content %}
        <div class="py-2">
            <div class="row">
                {% for t in object_list %}
                <div class="col-md-3">
                    <div class="card mb-4 box-shadow bg-green-500">
                            <div class="card-body">
                                <h2 style="font-size:18px;font-weight:bold;min-height:42px;"><a class="text-dark"  href="#">
                                    {{t.currency|truncatechars:50}}</a></h2>
                                <div class="d-flex justify-content-between align-items-center">
                                    <small class="text-muted">{{t.country|truncatechars:25}}</small>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
                {% endfor %}
            </div>


{% endblock content %}

index.html -- tailwind

{% extends 'base.html' %}

{% block title %}Home{% endblock title %}

{% block content %}
    <div class="p-10 ">  
        <div class="max-w-sm rounded overflow-hidden shadow-lg">
            {% for t in object_list %}
          <div class="px-6 py-4">
            <div class="font-bold text-xl mb-2">{{t.country}}</div>
            <p class="text-gray-700 text-base">
              {{ t.currency }}
            </p>
          </div>
          {% endfor %}
        </div>
    </div>
{% endblock content %}

В версии Tailwind вы запускаете цикл for слишком поздно, поэтому все ваши элементы находятся на одной карте. А для воссоздания 4-колоночной сетки в Tailwind я рекомендую использовать утилиты сетки, в частности grid, которая является display: grid и grid-cols-4, которая является grid-template-columns: repeat(4, minmax(0, 1fr)).

Ваш код может выглядеть следующим образом:

{% extends 'base.html' %}

{% block title %}Home{% endblock title %}

{% block content %}
    <div class="p-10 grid sm:grid-cols-2 md:grid-cols-4 gap-5"> 
      {% for t in object_list %}
        <div class="bg-green-500 rounded overflow-hidden shadow-lg">
          <div class="px-6 py-4">
            <div class="font-bold text-xl mb-2">{{t.country}}</div>
            <p class="text-gray-700 text-base">
              {{ t.currency }}
            </p>
          </div>
        </div>
      {% endfor %}
    </div>
{% endblock content %}

Вот наглядный пример ожидаемого результата https://play.tailwindcss.com/AWK45UcOug

Вернуться на верх