問
我正在嘗試在 django 框架中使用 Tailwind 重新創建引導卡行布局
BLOCKER
然而，順風嘗試導致以下結果
index.html -- 引導程式
{% 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 %}
uj5u.com熱心網友回復：
您在 Tailwind 版本上開始 for 回圈標簽太晚了，因此您的所有專案都在一張卡片中。為了在 Tailwind 中重新創建 4 列網格布局，我建議使用網格實用程式，特別grid是哪個 isdisplay: 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.tai??lwindcss.com/AWK45UcOug
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/343437.html