Twitter bootstrap 具有不同缩略图高度的引导网格 图像800x500 图像400x500 图像400x500 图像800x500

我使用的是bootstrap，上面的网格每行有2个图像。所有图像的宽度均为500px。第一个图像的高度为800px，而第二个图像的高度为400px。第三幅图像的高度为400px，应直接显示在第一幅图像的下方。我的问题是，第三个图像没有直接显示在第一个图像的下方。在第一个缩略图和第三个缩略图之间有一个很大的空间。当每个图像都具有相同的高度时，它就会工作。你知道为什么吗？多谢各位

预期的结果是：

---

每个图像的高度不同，但宽度相同

您需要将每一行括在一个class=“row”中

图像800x500
图像400x500
图像400x500
图像800x500

---

要获得链接到的精确布局，需要使用引导网格系统以外的其他系统。它不是那样工作的。

问题是，您的第四个img的高度为800像素，因此使您的行的高度为800像素。由于大多数img在元素底部垂直对齐，因此在img 1和3之间留下了一个很大的空白。我会降低第四张图片的高度。这是每个图像高度不同的理想结果。据我所知，引导网格就是这样的，有行。看看

<div class="col-md-6">
     <div class="thumbnail">
          <img src="800x500.jpg" alt="">
             <div class="caption">
                  <h3>Image 800x500</h3>
                </div>
            </div>
     </div>
</div> 
<div class="col-md-6">
     <div class="thumbnail">
          <img src="400x500.jpg" alt="">
             <div class="caption">
                  <h3>Image 400x500</h3>
             </div>
     </div>
</div>
<div class="col-md-6">
     <div class="thumbnail">
          <img src="400x500.jpg" alt="">
             <div class="caption">
                  <h3>Image 400x500</h3>
             </div>
     </div>
</div>
<div class="col-md-6">
     <div class="thumbnail">
          <img src="800x500.jpg" alt="">
             <div class="caption">
                  <h3>Image 800x500</h3>
             </div>
     </div>
</div>

<div class="row">
  <div class="col-md-6">
    <div class="thumbnail">
      <img src="800x500.jpg" alt="">
         <div class="caption">
              <h3>Image 800x500</h3>
            </div>
        </div>
     </div>
   </div> 
   <div class="col-md-6">
     <div class="thumbnail">
      <img src="400x500.jpg" alt="">
         <div class="caption">
              <h3>Image 400x500</h3>
         </div>
    </div>
  </div>
</div>
<div class="row">
  <div class="col-md-6">
    <div class="thumbnail">
      <img src="400x500.jpg" alt="">
         <div class="caption">
              <h3>Image 400x500</h3>
         </div>
    </div>
  </div>
  <div class="col-md-6">
    <div class="thumbnail">
      <img src="800x500.jpg" alt="">
         <div class="caption">
              <h3>Image 800x500</h3>
         </div>
    </div>
  </div>
</div>