我正在使用 twitter bootstrap,我想在我的缩略图上做一个交叉淡入淡出动画,所以我创建了两个具有不同 z 索引的单独类,然后我将它们放入缩略图标签中。然后我使用一些简单的 jquery 使顶层在 mouseenter 时淡出并在 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;
}
此外,还包括 hte twitter bootstrap css 文件:https://github.com/twitter/bootstrap/blob/master/docs/assets/css/bootstrap-responsive.css
最佳答案
基本上,所有调整大小都是通过媒体查询完成的...我会尝试调整 css 以满足您的需求...创建 your-responsive.css 并根据您想要的所有媒体大小定义您的样式在该文件中解决...它将覆盖 Bootstrap 响应 css,因此您可以实现您需要的任何更改...
关于css - 如何在 twitter bootstrap 的缩略图元素中获取 div 以正确调整大小?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13730701/