如何在twitter引導中的縮略圖元素中獲取div以正確重新調整大小？

我使用的是twitter bootstrap，我想在縮略圖上做一個交叉淡化動畫，所以我創建了兩個不同的z索引，然後放在縮略圖標記中。然後，我使用一些簡單的jQuery來讓頂層在mouseenter上淡出，並在mouseleave中淡入。這一切看起來都很棒，但現在我遇到了這樣一個事實，即在調整窗口大小時，圖像不能很好地流動。如何在twitter引導中的縮略圖元素中獲取div以正確重新調整大小？

縮略圖開始重疊並且笨重地重新調整大小。下面是代碼的示例：

<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; 
}

此外，包括HTE Twitter的引導CSS文件是：https://github.com/twitter/bootstrap/blob/master/docs/assets/css/bootstrap-responsive.css

來源

2012-12-05 Jaclyn Konzelmann

你可以在你使用的類中包含任何相關的代碼嗎？這裏還不夠。 – dcreight

.bottom { \t position：absolute; \t z-index：1; } .top {position：absolute; z-index：2; } 此外，可以找到bootstrap.css文件，其中有更多可定義縮略圖和縮略圖的文件：https：//github.com/twitter/bootstrap/blob/master/docs/assets/css/bootstrap- responsive.css –

我試圖在IE9中重現這個問題，發現'position：absolute'對我造成了一個問題。不完全如您所描述的，但我可以通過在'.top'和'.bottom'類中使用'position：relative'來消除這個問題。這[鏈接]（http://css-discuss.incutio.com/wiki/Overlapping_And_ZIndex）也可能有用。 – dcreight

基本上，所有的重通過媒體查詢完成大小調整...我會嘗試調整css以適應您的需求...創建您的responsive.css並根據您要在該文件中解決的所有媒體大小定義樣式...它將覆蓋引導響應的CSS，因此你可以實現whateve r改變你的需求...

來源

2012-12-30 18:17:59 max81

如何在twitter引導中的縮略圖元素中獲取div以正確重新調整大小？

回答

相關問題