Python Django：每个行有4个元素

我需要一个网格，每行有4个元素。我试过这个答案：

但网格未对齐，因为某些元素名称比其他元素名称长，导致它们未对齐：

<div class="row">
  {% for product in products %}
       {% if forloop.first %}<div class="row">{% endif %}
       <div class="col-xs-4">
          <div class="">
             <a href="{{ product.get_url }}"><img class=""
                                                  src="{{ product.image.url }}"
                                                  alt="{{ product.name }}"></a>
          </div>

          <span class="text-center">{{ product.name }}</span>
       </div>
       {% if forloop.counter|divisibleby:4 %}</div>
       <div class="row">{% endif %}
       {% if forloop.last %}</div>{% endif %}
  {% endfor %}
</div>

{products%中产品的%s}
{%if-forloop.first%}{%endif%}
{{product.name}
{%if-forloop.counter | divisibleby:4%}
{%endif%}
{%if-forloop.last%}{%endif%}
{%endfor%}

给出这个结果：

2） 然后我尝试使用Ul和li元素：

<div class="row">
    <ul class="my_products_list list-inline">
        {% for product in products %}


            <li class="text-center list-inline-item my_margin_right">
                <div class="text-center">
                    <a href="{{ product.get_url }}"><img class="my_image_medium"
                                                         src="{{ product.image.url }}"
                                                         alt="{{ product.name }}"></a>
                </div>

                <span>{{ product.name }}</span>

            </li>

        {% endfor %}
    </ul>
</div>

{products%中产品的%s}

{{product.name}

{%endfor%}

但是没有成功，给了我这个结果：

使用引导网格：

<div class="row col-md-12">
    {% for product in products %}
        <div class="col-md-3">
            <div class="image-container">
               <a><img/></a>
            </div>
            <span>{{ product.name }}</span>
        </div>
    {% endfor %}
</div>

{products%中产品的%s}
{{product.name}
{%endfor%}

最大值可以为12，因此如果在行中设置12，则除以4，然后为每个对象设置3