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并开始一个新的div，所以我们每两个图像就会开一个新行！

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

1 个答案: