具有不同缩略图高度的引导网格

Question

<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>

我正在使用引导程序，并在上面的网格中每行包含 2 张图像。所有图像的宽度相同，均为 500 像素。第一张图片的高度为 800 像素，而第二张图片的高度为 400 像素。第三张图片的高度为 400 像素，应直接显示在第一张图片下方。我的问题是第三张图片没有直接显示在第一张图片下方。是第一个缩略图和第三个缩略图之间的大空间。当每个图像具有相同的高度时，它可以工作。知道为什么吗？谢谢

期望的结果是：http://wlog.cn/demo/waterfall/infinitescroll.html

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

Answer 1

你需要将

每一行括在一个class="row"中

http://getbootstrap.com/css/#grid

<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>

要获得您链接到的精确布局类型，您需要使用 Bootstrap 网格系统以外的其他内容。 它不是那样工作的。