css3列数溢出问题

Question

使用BS4 Alpha的列数。我有悬停状态的比例（1.02）。当你悬停时，卡被切断，看起来它想要在第一张牌下面显示一个新元素。不确定如何防止这种行为。

http://i.stack.imgur.com/KQFQ1.png

http://i.stack.imgur.com/xcS5w.png

CSS

.card-columns{
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
-webkit-column-gap: 20px;
-moz-column-gap: 20px;
column-gap: 20px;
}
.card-columns .card {
width: 100%;
display: inline-block;
margin-bottom: 25px;
}
.card {
position: relative;
background: #fff;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
}
.card.card-hover-colored:hover {
background: #EFFAFF;
}

.card.card-hover:hover {
-webkit-transform: scale(1.02);
-ms-transform: scale(1.02);
-o-transform: scale(1.02);
transform: scale(1.02);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
cursor: pointer;
}

CODE

<div class="card-columns">
    <div class="card card-hover" >
      <div class="card-block">
        <i class="zmdi zmdi-hc-4x zmdi-check"></i>
        <h4>Twitter Account</h4>
        <p>Connect your Twitter account before to start sharing content.</p>
      </div>
    </div>

    <div class="card card-hover">
      <div class="card-block">
        <i class="zmdi zmdi-hc-4x zmdi-check"></i>
        <h4>Share on Twitter</h4>
        <p>Successfully share content on Twitter.</p>
      </div>
    </div>