부트 스트랩 열이 올바르게 정렬되지 않았습니다.

Question

내 열에 식별 할 수없는 이상한 버그가 있습니다. 내 잘못인지 아니면 부트 스트랩인지는 알 수 없습니다.

기본적으로 나는 <div class="col-lg-2 col-md-2 col-sm-3 col-xs-4">을 많이 포함하는 단일 <div class="row">을 가지고 있습니다. 간단하게 달성하고자하는 것은 모든 col * 항목이 화면에 맞춰지고 (100 % 너비) 크기를 조정할 때 서로 정렬된다는 것입니다. 이것은 JSFiddle을 제외하고는 정상적으로 작동합니다.

문제는 일부 행에서 하나의 div가 완벽하게 미쳐서 행에 올바르게 정렬되지 않는다는 것입니다. (피들에서 결과를 천천히 크기를 조정하려고하면 내 뜻을 알 수 있습니다).

저는 최신 버전 (FF, 같은 이상한 결과가 나왔습니다 ...)으로 부트 스트랩 3.3.6과 크롬을 사용하고 있습니다. "clearfix"는 아무 것도하지 않습니다. 나는 같은 결과로 packery.js를 시도했다.

이 답변 (Bootstrap columns not aligning correctly이) 나를 도왔다 것입니다,하지만 난 (즉, 화면의 크기에 따라 달라집니다 때문에) 내가 가지고 얼마나 많은 열을 미리 알 수없는 ... 물론

, 내가 가진 분마다 높이를 설정해 보았습니다 .gallery-item ...

아이디어가 있으십니까? 사전에

감사합니다,

업데이트가 여기 내 코드에 표시 누락 된 CSS 있습니다 :

div.gallery-item { 
    margin-bottom: 15px; 
} 

div.gallery-item, div.gallery-item * { 
    -webkit-transition: all 300ms; 
    -moz-transition: all 300ms; 
    transition: all 300ms; 
} 

.gallery-item { 
    cursor: pointer; 
} 

.gallery-item.active { 
    background-color: rgba(128,192,255,0.5); 
} 

두 번째 업데이트의 조언에 따라, 나는 그것이 추가하여 작동하도록 다음과 같이 갤러리 항목마다 고정 된 높이 :

.gallery-item { 
    height: 300px; 
} 

감사합니다. ll :)

Answer 1

문제는 행 안의 모든 열이 같은 높이가 아니기 때문입니다. 같은 기둥 높이를 유지하려면 다음을보십시오.

Link here

이 updated Fiddle에서 봐,이 방법으로 당신에게

추가 CSS

을 바이올린을 업데이트

.row-eq-height { 
    display: -webkit-box; 
    display: -webkit-flex; 
    display: -ms-flexbox; 
    display:   flex; 
} 

gallery-item

row-eq-height gallery-item