hình thu nhỏ có chiều cao khác nhau: hành vi tôi có chính xác không?

Question

Tôi đang sử dụng bootstrap để tạo một lưới gồm div thumbnails với các độ cao khác nhau. Mã này là cái gì đó sau cấu trúc này:

<div class="row"> 
    <ul class="thumbnails"> 
     <li class="span4"> 
      <div class="thumbnail"> 
       content here 
      </div> 
     </li> 
     <li class="span4"> 
      <div class="thumbnail"> 
       content here 
      </div> 
     </li> 
     <li class="span4"> 
      <div class="thumbnail"> 
       content here 
      </div> 
     </li> 
    </ul> 
</div> 

tất nhiên mỗi thumbnail có một nội dung khác nhau, và tôi có độ cao khác nhau như một kết quả. Những gì tôi có được điều này là:

như bạn có thể thấy, giữa một chất chống thẩm mỹ, không gian rỗng unsmart trống đầu tiên và thứ hai có. Điều này có bình thường không? Mã tôi viết có được cấu trúc tốt không? Làm thế nào tôi có thể tránh được hành vi này? Tôi đã đọc một gợi ý cho biết điều đúng đắn cần làm là thêm một hàng vào ba hình thu nhỏ, sau đó đóng hàng và chèn thêm ba hình thu nhỏ nữa, v.v. Nhưng IMHO tôi nghĩ rằng đó không phải là điều đúng đắn để làm, bởi vì không có gì có thể chồng chất lên và tôi không thể có được sự kỳ diệu của bootstrap. Bất kỳ đề xuất nào đều được chào đón :-)

Answer 1

Có, hành vi đó được mong đợi. Bạn có thể sử dụng một plugin như jQuery Isotope (https://github.com/desandro/isotope) hoặc Masonry để có được những hình ảnh lấp đầy trong không gian màu trắng.

Đây là một bản demo của hình thu nhỏ đồng vị + Bootstrap:

http://bootply.com/61482