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

【问题标题】：How do you get a div within the thumbnail element in twitter bootstrap to re-size correctly?如何在 twitter bootstrap 的缩略图元素中获取 div 以正确调整大小？
【发布时间】：2013-01-09 04:42:52
【问题描述】：

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

【问题讨论】：

您可以在您使用的类中包含任何相关代码吗？这里不够继续。
.bottom { 位置：绝对； z-索引：1； } .top { 位置：绝对； z-索引：2；另外，还有更多定义缩略图和缩略图的 bootstrap.css 文件，可以找到：github.com/twitter/bootstrap/blob/master/docs/assets/css/…
我尝试在 IE9 中重现该问题，发现 position: absolute 对我造成了问题。与您描述的不完全一样，但我能够通过在 .top 和 .bottom 类中使用 position: relative 来消除问题。这个link 也可能有用。
一旦我更改为相对位置，img 就不再重叠，这就是导致淡入淡出过渡首先起作用的原因。我之前确实玩过，发现 position:relative 修复了回流问题，但随后打破了淡入淡出过渡 - 因此寻找一种方法来保持 img 的重叠但也能正确回流。
嗨@JaclynKonzelmann 你能也包括代码结构吗？或者链接也会非常有用！

标签： css html twitter-bootstrap

【解决方案1】：

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

【讨论】：