【发布时间】：2021-04-17 16:39:49
【问题描述】：
我的 Hugo 页面有以下代码，用于列出使用 Tailwind CSS 格式化的新帖子：
{{ define "main" }}
{{ range .Pages }}
<div class="grid grid-flow-row grid-cols-3">
<div class="flex justify-center">
<div class="bg-white shadow-xl rounded-lg overflow-hidden">
<div class="bg-cover bg-center h-56 p-4" style="background-image: url(https://ui-avatars.com/api/?name=John+Doe&size=512)">
<div class="flex justify-end">
</div>
</div>
<div class="p-4">
<p class="uppercase tracking-wide text-sm font-bold text-gray-700">{{ .Params.Major}}</p>
<p class="text-3xl text-gray-900 font-bold">{{ .Title }}</p>
<p class="text-gray-700">A small description and a bucnch of stuff.</p>
</div>
<div class="flex p-4 border-t border-gray-300 text-gray-700">
<div class="flex-1 inline-flex items-center">
<svg class="h-6 w-6 text-gray-600 fill-current mr-3" viewBox="0 0 20 20">
<path d="M15.573,11.624c0.568-0.478,0.947-1.219,0.947-2.019c0-1.37-1.108-2.569-2.371-2.569s-2.371,1.2-2.371,2.569c0,0.8,0.379,1.542,0.946,2.019c-0.253,0.089-0.496,0.2-0.728,0.332c-0.743-0.898-1.745-1.573-2.891-1.911c0.877-0.61,1.486-1.666,1.486-2.812c0-1.79-1.479-3.359-3.162-3.359S4.269,5.443,4.269,7.233c0,1.146,0.608,2.202,1.486,2.812c-2.454,0.725-4.252,2.998-4.252,5.685c0,0.218,0.178,0.396,0.395,0.396h16.203c0.218,0,0.396-0.178,0.396-0.396C18.497,13.831,17.273,12.216,15.573,11.624 M12.568,9.605c0-0.822,0.689-1.779,1.581-1.779s1.58,0.957,1.58,1.779s-0.688,1.779-1.58,1.779S12.568,10.427,12.568,9.605 M5.06,7.233c0-1.213,1.014-2.569,2.371-2.569c1.358,0,2.371,1.355,2.371,2.569S8.789,9.802,7.431,9.802C6.073,9.802,5.06,8.447,5.06,7.233 M2.309,15.335c0.202-2.649,2.423-4.742,5.122-4.742s4.921,2.093,5.122,4.742H2.309z M13.346,15.335c-0.067-0.997-0.382-1.928-0.882-2.732c0.502-0.271,1.075-0.429,1.686-0.429c1.828,0,3.338,1.385,3.535,3.161H13.346z"></path>
</svg>
<p><span class="text-gray-900 font-bold">3rd</span> Year</p>
</div>
<div class="flex-1 inline-flex items-center">
<svg class="h-6 w-6 text-gray-600 fill-current mr-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M17.03 21H7.97a4 4 0 0 1-1.3-.22l-1.22 2.44-.9-.44 1.22-2.44a4 4 0 0 1-1.38-1.55L.5 11h7.56a4 4 0 0 1 1.78.42l2.32 1.16a4 4 0 0 0 1.78.42h9.56l-2.9 5.79a4 4 0 0 1-1.37 1.55l1.22 2.44-.9.44-1.22-2.44a4 4 0 0 1-1.3.22zM21 11h2.5a.5.5 0 1 1 0 1h-9.06a4.5 4.5 0 0 1-2-.48l-2.32-1.15A3.5 3.5 0 0 0 8.56 10H.5a.5.5 0 0 1 0-1h8.06c.7 0 1.38.16 2 .48l2.32 1.15a3.5 3.5 0 0 0 1.56.37H20V2a1 1 0 0 0-1.74-.67c.64.97.53 2.29-.32 3.14l-.35.36-3.54-3.54.35-.35a2.5 2.5 0 0 1 3.15-.32A2 2 0 0 1 21 2v9zm-5.48-9.65l2 2a1.5 1.5 0 0 0-2-2zm-10.23 17A3 3 0 0 0 7.97 20h9.06a3 3 0 0 0 2.68-1.66L21.88 14h-7.94a5 5 0 0 1-2.23-.53L9.4 12.32A3 3 0 0 0 8.06 12H2.12l3.17 6.34z"></path>
</svg>
<p><span class="text-gray-900 font-bold"></span> Programming</p>
</div>
</div>
<div class="px-4 pt-3 pb-4 border-t border-gray-300 bg-gray-100">
<div class="text-xs uppercase font-bold text-gray-600 tracking-wide">Made By</div>
<div class="flex items-center pt-2">
<div>
<p class="font-bold text-gray-900">Aman Bhargava</p>
</div>
</div>
</div>
</div>
</div>
</div>
{{ end }}
{{ end }}
我想要的是有三列卡片，每个新帖子在列中从左到右添加，然后在下面添加新行。但是，我的代码给了我一个堆叠列表而不是预期的输出：
我想要这样的东西：
| 1st Column | 2nd Column | 3rd Column |
|---|---|---|
| First Post | Second Post | Third Post |
| Fourth Post | Fifth Post | Sixth Post |
【问题讨论】：
-
使用上面的代码，我可以复制您在play.tailwindcss.com 中提到的所需行为。是否有其他 CSS 可能导致该问题？
-
@juliomalves 感谢您的回复！ Hugo 使用称为 partials 的东西来构建页面，因此页面的这一部分被插入到主
base模板中。这就是它的样子：pastebin.com/X8E8RHXG（包含列表的部分在第 19 行）。我能看到的唯一额外的 CSS 是<div class="my-1 w-full overflow-hidden lg:w-5/6 xl:w-5/6 bg-gray-200 pt-5 items-center"> -
遗憾的是，我仍然无法通过附加 HTML 重现该问题。
-
@juliomalves 对此感到抱歉。我已经上传了整个 repo，希望对你有帮助。这个特定的文件在这里：github.com/thedivtagguy/srishtiarchives/blob/master/themes/…
-
@juliomalves 你有什么运气吗？我已经开始悬赏这个问题，如果你设法解决它，我很乐意将它奖励给你。
标签： html css hugo tailwind-css