html - 无法在 Bootstrap 中对齐图像

Question

我正在尝试使用 HTML 制作未知数量的图片库。我正在使用 bootstrap 来显示图像并进行一些 django 模板库编码。我无法正确对齐图像。我基本上是在尝试在 Django 模板中使用循环标记来在每 2 个图像之后在 Bootstrap 中显示行类。我希望图像连续出现，每行有两个图像。行中每个图像的高度应正确对齐。现在高度没有对齐。一张图片略高于另一张。你能帮忙吗，这是我的 html 文件？

 <div class="container">
 {% load staticfiles %}
 {% for plot in plots%}
 {% with plot|add:".png" as image_static %}`
 <div class = "{% cycle 'row' '' %}">
  <div class = "col-md-5">
  <div class = "thumbnail">
    <img src="{% static image_static %}" alt="My image"/>
  </div>

  <div class = "caption">
     <h3>Thumbnail label</h3>
     <p>Some sample text. Some sample text.</p>

     <p>
        <a href = "#" class = "btn btn-primary" role = "button">
           Button
        </a> 

        <a href = "#" class = "btn btn-default" role = "button">
           Button
        </a>
     </p>    
  </div>    
</div>
{% endwith %}
<br><br><br>
</div>
{% endfor %}
</div>

Answer 1

cycle 做不到!以下是它可以如何完成的:

{% for plot in plots%}
  {% with plot|add:".png" as image_static %}
    <div class='col-md-6'>
      <div class = "thumbnail">
        <img src="{% static image_static %}" alt="My image"/>
      </div>
      <!-- ... -->
    </div>
    {% if forloop.counter|divisibleby:"2" %}
      </div>
      <div class='row'>
    {% endif %}
  {% endwith %}
{% endfor %}

因此，只要 forloop 索引可被 2 整除，我们就关闭行 div 并开始一个新行，因此我们将每两张图像开始一个新行!