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

【问题标题】：Bootstrap grid with different thumbnail height具有不同缩略图高度的引导网格
【发布时间】：2016-03-04 05:12:03
【问题描述】：

<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

每张图片的高度不同，但宽度相同。

【问题讨论】：

问题是你的第四张图片是 800 像素高，因此你的行高 800 像素。由于大多数图像在元素的底部垂直对齐，因此在图像 1 和 3 之间留下了很大的空白。我会降低第四张图像的高度。
wlog.cn/demo/waterfall/infinitescroll.html 这是每个图像的高度可以不同的理想结果。
据我了解，引导网格应该是这样的，有行。看看masonry.desandro.com

标签： twitter-bootstrap twitter-bootstrap-3

【解决方案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 网格系统以外的其他工具。这样不行。

【讨论】：