Django：每行有 4 个元素答案

【问题标题】：Django: Rows with 4 elements eachDjango：每行有 4 个元素
【发布时间】：2018-12-11 02:47:39
【问题描述】：

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

django template to populate bootstrap rows and columns

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

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

给出这个结果：

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>

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

【问题讨论】：

标签： python django

【解决方案1】：

使用引导网格：

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

您最多可以有 12 个，因此如果您在行中设置 12，则除以 4 并为每个对象设置 3。

【讨论】：