2

我正在使用 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 引导 css 文件，即：https ://github.com/twitter/bootstrap/blob/master/docs/assets/css/bootstrap-responsive.css

4

1 回答 1

0

基本上，所有重新调整大小都是通过媒体查询完成的...我会尝试调整 css 以满足您的需求...创建 your-responsive.css 并根据您想要解决的所有媒体尺寸定义您的样式该文件...它将覆盖引导响应的CSS，因此您可以实现所需的任何更改...

于 2012-12-30T18:17:59.847 回答