我正在使用MPTT构建一个 comments /回复系统，我试图使用缩进来清楚地显示哪些 comments 是回复，以及这些回复处于哪个级别.
我使用comment.level属性来确定填充值，因此注释级别0将是父注释(因此没有填充)，对该父注释的回复将具有注释.级别为1(因此填充为1)，对回复的回复将具有注释.级别为2(因此填充为2).这将为父 comments 创建缩进pl-0，为第一个回复创建pl-1，为第二个回复创建pl-2.
{% load mptt_tags %}
{% if not node.is_leaf_node %}
{% for comment in comments %}
{% if comment.level > 0 and comment.tree_id == tree_id %}
<div class="pl-{{ comment.level }} mt-2">
<div class="relative grid grid-cols-1 gap-4 p-4 mb-4 border rounded-lg bg-white shadow-lg">
<div class="relative flex gap-4">
<div class="flex flex-col w-full">
<div class="flex flex-row justify-between">
{% if not comment.deleted %}
<p class="relative text-xl whitespace-nowrap truncate overflow-hidden">{{ comment.level }}</p>
{% else %}
<p class="relative text-xl whitespace-nowrap truncate overflow-hidden">[deleted]</p>
{% endif %}
<a class="text-gray-500 text-xl" href="#"><i class="fa-solid fa-trash"></i></a>
</div>
<p class="text-gray-400 text-sm">{{ comment.date_added }}</p>
</div>
</div>
{% if not comment.deleted %}
<p class="-mt-4 text-gray-500">{{ comment.body }}</p>
{% else %}
<p class="-mt-4 text-gray-500">[deleted]</p>
{% endif %}
<div class="relative">
{% if user == comment.author and not comment.deleted %}
<button hx-delete="{% url 'posts:delete_comment' comment.id post %}" hx-confirm="Are you sure you want to delete your comment?" class="-mt-4 text-gray-500">delete</button>
{% endif %}
<button hx-get="{% url 'posts:comment_reply' id=comment.id pk=post %}" hx-swap="afterend" class="mr-auto -mt-4 text-gray-500">reply</button>
</div>
</div>
</div>
{% endif %}
{% endfor %}
{% endif %}
我的问题是填充被忽略了，填充在DOM中正确通过，因为我可以看到我的回复有类似pl-3的填充.我认为这是因为父div不允许元素应用填充，但我无法解决这个问题.
当"请看回复..."按钮在下面的代码中被点击(靠近底部)，它触发一个AJAX调用并加载上述代码.
{% if comments %}
{% load mptt_tags %}
{% recursetree comments %}
<div class="relative grid grid-cols-1 gap-4 p-4 mb-4 border rounded-lg bg-white shadow-lg">
<div class="relative flex gap-4">
<div class="flex flex-col w-full">
<div class="flex flex-row justify-between">
{% if not node.deleted %}
<p class="relative text-xl whitespace-nowrap truncate overflow-hidden">{{ node.level }}</p>
{% else %}
<p class="relative text-xl whitespace-nowrap truncate overflow-hidden">[deleted]</p>
{% endif %}
<a class="text-gray-500 text-xl" href="#"><i class="fa-solid fa-trash"></i></a>
</div>
<p class="text-gray-400 text-sm">{{ node.date_added }}</p>
</div>
</div>
{% if not node.deleted %}
<p class="-mt-4 text-gray-500">{{ node.body }}</p>
{% else %}
<p class="-mt-4 text-gray-500">[deleted]</p>
{% endif %}
<div class="relative">
{% if user == node.author and not node.deleted %}
<button hx-delete="{% url 'posts:delete_comment' node.id post.pk %}" hx-confirm="Are you sure you want to delete your comment?" class="-mt-4 text-gray-500">delete</button>
{% endif %}
<button hx-get="{% url 'posts:comment_reply' id=node.id pk=post.pk %}" hx-swap="afterend" class="mr-auto -mt-4 text-gray-500">reply</button>
<button onclick="this.disabled = true" hx-get="{% url 'posts:load_replies' id=node.tree_id pk=post.pk %}" hx-swap="afterend" class="absolute right-0 text-gray-500">see replies...</button>
</div>
</div>
{% endrecursetree %}
{% else %}
<p>No comments</p>
{% endif %}
感谢这可能很难描绘，希望这张图片有所帮助，你可以看到对帖子的回复没有向内缩进，尽管他们有递增的填充.
