Question

我创建了一个漂亮的动画，并且我使用bootstrap作为框架来使我的网站响应，我尝试使用以下方式使动画响应：

<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%;
}

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

Answer 1

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

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

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

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

如何制作漂亮的动画响应？

1 个答案: