在 django 中使用 tailwind 重新创建 bootstrap 卡片行布局

Question

询问
我正在尝试在 Django 框架

中使用 Tailwind 重新创建 bootstrap 卡片行布局

拦截器
然而顺风尝试结果如下

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 -- 顺风

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

Answer 1

您在 Tailwind 版本上启动 for 循环标签的时间太晚，因此您的所有项目都在一张卡片中。要在 Tailwind 中重新创建 4 列网格布局，我建议使用网格实用程序，特别是 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

在 django 中使用 tailwind 重新创建 bootstrap 卡片行布局

Recreating bootstrap cards row layout with tailwind in django

django

tailwind-css