在Django框架中使用Tailwind复现Bootstrap卡片行布局的问题

问题原因 #

你编写的Tailwind版本代码存在两个核心错误：

1. 循环逻辑写在了同一个卡片容器内部，导致所有数据条目都塞进了同一张卡片中，没有和Bootstrap版本一样为每个条目生成独立卡片
2. 没有配置响应式多列布局，无法实现Bootstrap中row + col-md-3对应的一行4张卡片的效果

修正后的Tailwind版本代码 #

{% extends 'base.html' %}

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

{% block content %}
<div class="p-10">
    <!-- 对应Bootstrap的row，实现响应式多列布局：移动端1列，中等屏幕以上4列，列间距4 -->
    <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
        {% for t in object_list %}
        <!-- 每个循环生成独立卡片，对应Bootstrap的col-md-3 + card + mb-4 + box-shadow -->
        <div class="rounded overflow-hidden shadow-lg bg-green-500 mb-4">
            <div class="px-6 py-4">
                <h2 class="font-bold mb-2 min-h-[42px] text-lg text-dark">
                    <a href="#">{{t.currency|truncatechars:50}}</a>
                </h2>
                <div class="flex justify-between items-center">
                    <small class="text-gray-500">{{t.country|truncatechars:25}}</small>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
</div>
{% endblock content %}

关键修改说明 #

• 用grid grid-cols-1 md:grid-cols-4 gap-4替代Bootstrap的栅格系统：小屏自动堆叠为单列，屏幕宽度≥768px时自动排布为4列，和原Bootstrap效果完全一致
• 把循环逻辑移到卡片外层，每个数据条目对应独立卡片组件
• 保留了原Bootstrap版本的绿色背景、标题最小高度、文本截断规则、排版层级等样式细节

内容的提问来源于stack exchange，提问作者IOIOIOIOIOIOI