0

我创建了一个流畅的动画，我使用引导程序作为框架来使我的网站具有响应性，我尝试使用以下方法使动画响应：

<div class="row">
<div id="swiffycontainer" class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
</div>


#swiffycontainer{
width: 100%    !important;
height: auto   !important; 
}

但这似乎不起作用我尝试了所有不同的组合，唯一让它重新调整大小的方法是添加宽度或高度值，但是容器大小等都出错了。我也尝试过：

<div class="row-fluid">
        <div class="wrap2">

    <iframe src="animation.html" width="1280px" height="482px" frameborder="0"></iframe>
        </div>

</div>


.wrap2 {
  position: relative;
  padding-bottom: 56.25%; 
  padding-top: 2px;
  height: 0;
}

.wrap2 iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

但这只会重新调整动画容器的大小，动画本身仍然被切断。

4

1 回答 1

1

您不需要任何额外的类来实现这一点（所有这些 col-xx-12 类都是不必要的）。我的项目和你一样使用 Bootstrap 和 Swiffy。只需这个 css 就足够了：

#swiffycontainer{
    width: 100%;
    height: auto; 
}

如果不是这种情况，那么您需要尝试使用 Inspect Element（在 Chrome 上或使用 FireBug for Firefox）来查看“#swiffycontainer”的内部元素是否受到任何其他 css 规则的影响。

使用 iframe 的第二种方法不起作用，因为根本没有指定 iframe 中“body”的样式。因此，只有 iframe 标记受到影响。

于 2013-10-09T10:05:43.407 回答