jQuery的 - 翻转：翻转格的尺寸比前格

Question

我使用这个jQuery的小插件：https://nnattawat.github.io/flip/

的问题是，当我翻转一个div，翻转格是比它应该更小是。看看这个GIF：

我想的是，翻转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>