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>

我使用bootstrap并且上面的网格每行有2个图像。所有图像的宽度均为500px。第一张图片的高度为800px，而第二张图片的高度为400px。第三幅图像的高度为400像素，应直接显示在第一张图像下方。我的问题是第三张图像没有直接显示在第一张图像下面。第一个缩略图和第三个缩略图之间是一个很大的空间。当每个图像具有相同的高度时它起作用。有什么想法吗？谢谢

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

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

Answer 1

您需要将每一行括在一个类=＆＃34;行＆＃34;

中

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网格系统之外的其他内容。它没有那样的工作。

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

1 个答案: