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

我想用翻转动画正是这样example制定一个价格表，我也用引导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的要求

来源

2016-03-04 David Létourneau

你可以发送jsfiddle/snippet与工作的例子吗？ – Kocik

我加入了小提琴编辑部分:) –

你需要覆盖的宽度（如果你想的高度）

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/

来源

2016-03-04 00:57:18 Varon

您的例子没有工作。它们也重叠。看我的例子，它做同样的事情你：https://jsfiddle.net/vialeda/4kotLvgd/2/ –

哦。这只发生在Internet Explorer（我试过IE11）。 Chrome和Firefox都很好。 – Varon

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

回答

相关问题