부트 스트랩으로 절대 위치 지정

Question

안녕하세요. 호버 위에서 두 이미지가 희미 해져서 내 사이트에 이미지 목록을 추가하고 있습니다. 그러나 어떤 이유로 든 "col-md-3 col-sm-3"클래스를 무시하고 컬럼에서 빠져 나옵니다. 이 문제를 어떻게 해결할 수 있습니까?

<div class="container-fluid"> 
    <figure class="col-md-3 col-sm-3 client-item"> 
      <div class="fadehover"> 
       <img class="img-responsive thumbnail" src="images/clients/aersale.jpg" alt=""> 
       <img class="top img-responsive thumbnail" src="images/clients/aersale-grayscale.jpg" alt=""> 
       </div> 
    </figure> 
</div> 

CSS :

.clients-list { 
    margin-top: 60px; 
} 

.client-item { 
    margin-left: 10px; 
    margin-right: -20px; 
    position:  relative; 
} 

.fadehover { 
    position: relative; 
/* height: 257px; */ 
} 

.fadehover img { 
    position:   absolute; 
    left:    0; 
    -webkit-transition: opacity 1s ease-in-out; 
    -moz-transition: opacity 1s ease-in-out; 
    -o-transition:  opacity 1s ease-in-out; 
    transition:   opacity 1s ease-in-out; 
} 

.fadehover img.top:hover { 
    opacity: 0; 
} 

감사합니다!

Answer 1

쉬운 솔루션은 절대적이 경우 하나 개의 img 요소 .. 위치에 .top 다음과 같습니다

EXAMPLE HERE, 그래서 부모 요소 일에서

.fadehover img.top { 
    position:absolute; 
    left:0; 
    -webkit-transition: opacity 1s ease-in-out; 
    -moz-transition: opacity 1s ease-in-out; 
    -o-transition: opacity 1s ease-in-out; 
    transition: opacity 1s ease-in-out; 
} 

, .col-md-3.col-sm-3가 더 이상시 붕괴되지 않습니다 왜냐하면 하나의 하위 요소 만 절대적으로 배치되기 때문입니다. 이 경우 다른 img 요소는 절대적으로 배치 된 것과 달리 문서 플로우에 있기 때문에 상위 요소의 치수를 정의합니다.