Question

我还有一个空白。我希望第一篇文章将在右侧的趋势面板中对齐，但实际结果是第一篇文章上方有一个空格。

这是我的代码，导致有额外的空格。

{% for ctr in  id%}
   <div class="border">
       <a href="#" class="badge badge-danger p-2 float-right"> Bug </a>
       <div class="card-header"> 
          ...
       </div>
   </div>
{% endfor %}

如果我删除了for循环，我会得到实际的结果。

实际结果：

添加for循环时，我得到了this

预期结果：

没有for循环时，我得到this

这里都是images

Answer 1

早上好！

您是否曾想过将例如div标记的代码移出循环之外

<div class="border">
{% for ctr in  id%}
       <a href="#" class="badge badge-danger p-2 float-right"> Bug </a>
       <div class="card-header"> 
          ...
       </div>
{% endfor %}
</div>

或者这是每张卡的容器吗？

另一种解决方案是使用css child命令，如下所示：

<div class="badges">
{% for ctr in  id%}
<div class="border">
       <a href="#" class="badge badge-danger p-2 float-right"> Bug </a>
       <div class="card-header"> 
          ...
       </div>
</div>
{% endfor %}

<style>
.badges div:first-child.border {
  margin-top: ...;

}
</style>

for循环时的其他空格

1 个答案: