Question

我想使用与此example完全相同的翻转动画开发定价表，我还使用Bootstrap 3.3.6来开发整个网站。

因此，当我在Bootstrap网格系统中使用翻转动画时，它不再起作用，因为动画使用绝对定位以使动画正常工作。然后，每个定价表在较小的窗口上相互重叠。

有罪的CSS就是这个，它来自上面给出的链接：

.front, .back {
   backface-visibility: hidden;
   position: absolute;
   top: 0;
   left: 0;
}

最后，使用这样的网格系统不起作用：

<div class="row">
    <div class="col-sm-2 col-md-2">
    // pricing table #1
    </div>
    <div class="col-sm-2 col-md-2">
    // pricing table #2
    </div>
    ... until I reach 12 as total.
</div>

有没有人知道避免这种情况的方法？

谢谢，

大卫

修改

此处fiddle按要求

Answer 1

您需要覆盖宽度（如果需要，还要覆盖高度）

body .flip-container, body .front, body .back {
  width: 100%;
  height: auto;  
}

工作示例：https://jsfiddle.net/59wwkua3/

对于IE，您必须添加https://davidwalsh.name/css-flip#ieflip

中提到的额外类

我试图用你的例子走得更远。我发现你错过了flip-container课程。这是我上一次的工作。我用海军蓝填充了背面，并希望你找到如何获得剩下的.back https://jsfiddle.net/brr379Lp/

如何翻转元素而不破坏Bootstrap网格系统？

1 个答案: