无法在引导程序中对齐图像答案

【问题标题】：not able to align images in bootstrap无法在引导程序中对齐图像
【发布时间】：2016-03-30 05:50:42
【问题描述】：

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

【问题讨论】：

制作小提琴或使用 sn-p 编辑器显示 HTML 和 CSS

标签： html css django image twitter-bootstrap

【解决方案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 并开始一个新行，因此我们将每两个图像开始一个新行！

【讨论】：