css - 如何在 twitter bootstrap 的缩略图元素中获取 div 以正确调整大小？

Question

我正在使用 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

Answer 1

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