如何翻轉元素而不破壞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網格系統？

回答

相關問題