높이가 다른 미리보기 이미지 : 올바른 동작입니까?

Question

다른 높이의 div thumbnails 그리드를 생성하기 위해 부트 스트랩을 사용하고 있습니다. 코드는이 구조를 다음과 무언가이다 : 각 thumbnail 다른 내용이

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

물론, 나는 결과로 다른 높이를 가지고있다. 내가 얻는 것은 이것이다 : 상기 제 1 및 제 2 거기에 빈 반 미학, unsmart 빈 공간 사이

당신이 볼 수 있습니다. 이게 정상인가? 내가 잘 작성한 코드가 구조화되어 있습니까? 이 문제를 어떻게 피할 수 있습니까? 세 가지 축소판마다 행을 추가 한 다음 행을 닫고 세 개의 미리보기 이미지를 삽입하는 등 올바른 작업을 수행한다는 힌트를 읽었습니다. 그러나 IMHO는 옳은 일이 아니라고 생각합니다. 아무 것도 쌓일 수 없기 때문에 나는 bootstrap의 마법을 얻을 수 없었습니다. 어떤 제안도 환영합니다 :-)

Answer 1

네, 그 행동이 예상됩니다. 당신은 jQuery Isotope (https://github.com/desandro/isotope) 또는 Masonry와 같은 플러그인을 사용하여 이미지를 공백으로 채울 수 있습니다.

http://bootply.com/61482