트위터 부트 스트랩의 thumbnail 요소에서 div를 올바르게 다시 크기 지정하려면 어떻게합니까?

Question

저는 트위터 부트 스트랩을 사용하고 있습니다. 축소판 이미지에서 크로스 페이드 애니메이션을 만들고 싶었습니다. 그래서 z 인덱스가 다른 두 개의 클래스를 만들어서 축소판 태그에 넣었습니다. 그런 다음 간단한 jquery를 사용하여 맨 위 레이어를 마우스 포인트에서 페이드 아웃하고 mouseleave에서 페이드 인하십시오. 그것은 모두 멋지게 보이지만, 이제는 창 크기를 조정할 때 이미지가 제대로 흐르지 않아서 어려움을 겪고 있습니다.

썸네일이 겹치기 시작하고 어색하게 크기가 재조정됩니다. 내가 사용

<div class="container"> 
<div class="row"> 

<ul class="thumbnails"> 
    <li class="span3"> 
    <div class="thumbnail top"> 
    <img class="hover_image" src="assets/img/hoversquare.png"/> 
    </div> 
    <div class="thumbnail bottom"> 
    <img src="assets/img/hoversquare1.png"/> 
    </div> 
    </li> 

... (there are four of these <li> elements 

클래스가 있었다 :이다

.bottom { 
    position: absolute; 

    z-index:1; 
} 

.top { 
    position: absolute; 
    z-index:2; 
} 

또한 포함 했나 트위터 부트 스트랩 CSS 파일 : 기본적으로 https://github.com/twitter/bootstrap/blob/master/docs/assets/css/bootstrap-responsive.css

Answer 1

, 모든 다시 여기에 코드의 샘플입니다 사이징은 미디어 쿼리를 통해 이루어집니다 ... 저는 여러분의 필요에 맞게 CSS를 조정하려고합니다 ... your-responsive.css를 만들고 해당 파일에서 다루고 싶은 모든 미디어 크기마다 스타일을 정의하십시오 ... 응답하는 CSS를 부트 스트랩보다 우선 적용하므로 whateve를 구현할 수 있습니다. 당신이 필요로하는 변경 ...