2016-07-22 8 views
0

이 기능을 사용할 수없는 것 같습니다. 다른 높이의 이미지가있는 이미지 갤러리가있는 간단한 부트 스트랩 페이지가 있습니다. 나는 모든 넷째 .COL-MD-3Bootstrap3의 n 번째 자식이 제대로 정렬되지 않았습니다.

Bootply smippet 후 왼쪽을 취소 n 번째의 아이를 사용하려고 - http://www.bootply.com/7BhYr6J8rH 완성 된 페이지의 내용은 동적으로 데이터베이스에서 채워 것입니다

그래서 유연성이 필요합니다. 아무도 내가 잘못 가고있는 것을 지적 할 수 있습니까?

답변

1

설명하기 어렵지만 이미지에서 n 번째 자녀를 사용 중입니다. 이미지 목록이 없기 때문에 4 번째 이미지에는 도달하지 않으며 각 열에는 하나의 이미지 만 있고 더 이상은 없습니다. 그러나 행이 내가 그렇게 http://www.bootply.com/7BhYr6J8rH처럼 열을 기준으로 취소 코드를 편집 할 수 있도록 열 목록을 포함하지 :

.row .col-md-3:nth-child(5n) { 
    clear:left; 
} 

또 다른 아이디어를, 당신이 할 수있는 것은 같은 결과와 청소기에 대한 각각의 네 번째 열 후 <div class="clearfix"></div>을 추가 할 것입니다 암호.

+0

완벽하게 작동했습니다. 감사합니다. 설명에 감사드립니다. 물리적으로 화면에 이미지를 배치하는 경우 일반적으로 다른 행을 시작하지만 내용은 PHP를 통해 즉석에서 만들어집니다 - 감사합니다! –

관련 문제