안녕하세요 초급개발자 인사드립니다~

다름아니라 부트스트랩으로 반응형 사이트를 만들던 중 잘 해결이안되는 부분이 있어 문의드립니다.

부트스트랩 그리드시스템을 이용해 아래와 같은 layout 구성을 잡았습니다.

화면 가로 크기 992px ~ 최대크기

화면 가로 크기 768px ~ 992px

화면 가로 크기 768px 이하

그런데 768px ~ 992px 일때 이미지가 아래와 같이 잡힙니다.

각 이미지마다 태그는 <div><a><img></a></div> 이고, div를 기준으로 반응형 잡았습니다.

그런데 왜 위와같이 빈영역이 생기면서 이미지가 밀리는지 잘 모르겠네요

심지어 빈공간부분은 크롬 개발자도구로 어떤 영역도 잡히지 않습니다. ㅜ.ㅜ

이미지마다 마진, 패딩값은 0이구요!

이미지 반응형은 부트스트랩에 class="img-responsive" 클래스 이용했습니다.

저런 현상에서 구글에 뭘 검색해봐야할지도 모르겠어서 도움주시면 정말 감사드리겠습니다 ㅠㅠ

[소스코드]

각 이미지 하나하나는 아래와 같이 구현했습니다.

<div class="col-lg-4 col-sm-6">

                    <a href="경로" class="portfolio-box">

                        <img src="경로" class="img-responsive" alt="">

                        <div class="portfolio-box-caption">

                            <div class="portfolio-box-caption-content">

                                <div class="project-category text-faded">

                                    Project6.

                                </div>

                                <div class="project-name">

                                    프로젝트이름

                                </div>

                            </div>

                        </div>

                    </a>

                </div>