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

Posted 2023-02-24

【中文标题】无法在引导程序中对齐图像

【英文标题】：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 %" />
  </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

【参考方案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 %" />
      </div>
      <!-- ... -->
    </div>
    % if forloop.counter|divisibleby:"2" %
      </div>
      <div class='row'>
    % endif %
  % endwith %
% endfor %

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