Дополнительные пробелы при наличии для цикла

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, я получаю это это

Ожидаемый результат:

Когда нет цикла for, я получаю this

Вот оба изображения

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 следующим образом

<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>