jQueryの - 反転：反転したdiv要素のサイズは、フロントのdiv

Question

私はこのjQueryの-プラグインを使用しているよりも小さい：https://nnattawat.github.io/flip/

問題は、私はdiv要素を反転すると、反転したdivのは、それが必要よりも小さい、ということですさあ。このGIFを見てみましょう：

私は裏返しのdivのサイズが元のdiv要素と同じであることを望みます。何がうまくいかないのですか？ここで

は私の実装です：あなたが見ることができるように

<div class="col-xs-6 col-sm-4 col-md-3"> 
    <div id="<%=i%>" value="<%=card[1]%>" class="flip p-2"> 

     <div class="front yellowishcard text-center cardsize p-3"> 
     <%= card[0] %> 
     </div> 

     <div class="back yellowishcard text-center cardsize p-3"> 
     <%= card[0] %> 
     </div> 

    </div> 
    </div> 

、両方のdivは、「フロント」と「バック」を除いて、同じクラスを持っています。私は自分のCSSファイルをチェックして、スタイリングを前後に追加しませんでした。

マイCSS：

.yellowishcard { 
    background: #F3E380; 
    background-image: -webkit-linear-gradient(top, #F3E380, #E7C700); 
    background-image: -moz-linear-gradient(top, #F3E380, #E7C700); 
    background-image: -ms-linear-gradient(top, #F3E380, #E7C700); 
    background-image: -o-linear-gradient(top, #F3E380, #E7C700); 
    background-image: linear-gradient(to bottom, #F3E380, #E7C700); 
    -webkit-border-radius: 11; 
    -moz-border-radius: 11; 
    border-radius: 11px; 
    -webkit-box-shadow: 4px 4px 10px #666666; 
    -moz-box-shadow: 4px 4px 10px #666666; 
    box-shadow: 4px 4px 10px #666666; 
} 

.cardsize { 
    height: 250px !important; 
    display:flex; 
    align-items:center; 
} 

'P-2' と 'P-3' ブートストラップ4からのクラスです： 'フリップ' は何のスタイリングを持っていないhttps://v4-alpha.getbootstrap.com/utilities/spacing/

、それは私のjavascriptのためだけに存在しています働く

back yellowishcardとfront yellowishcardのクラスだけを使用すると同じ問題が発生します。

Answer 1

問題が見つかりました。この問題は、KresimirPendicによって暗示されました。この問題は、p-2によって引き起こされました。私がp-2をm-2に変更したとき、問題は消えます。ワーキング実装：

<div class="col-xs-6 col-sm-4 col-md-3"> 
    <div id="<%=i%>" value="<%=card[1]%>" class="flip m-2"> 

    <div class="front yellowishcard text-center cardsize p-3"> 
    <%= card[0] %> 
    </div> 

    <div class="back yellowishcard text-center cardsize p-3"> 
    <%= card[0] %> 
    </div> 

</div>