jquery - 在 .card-columns 内的卡片元素上使用 scale() 会剪切第一行的顶部

Question

使用：引导 4.3.1 和 jQuery 3.4.1

.card-columns我正在制作一个 Web 应用程序，它在容器内生成大量引导卡。当用户将鼠标悬停在卡片上时，它会被放大（使用 CSS transform: scale(1.1)）以显示它已被选中。

问题是在第一行，卡片的顶部被切断，如下所示： https ://i.imgur.com/W97j2Rl.png

（有趣的是，第一个似乎很好）

我尝试了设置overflow: visible，并尝试了不同的填充和边距设置，但没有奏效。

这是容器内卡片的代码：

<div class="card-columns" id="forms-container" style="margin: 25px; margin-bottom: 50px;">
<div class="card" id="32">
    <div class="card-body">
        <h5 class="card-title">test_final</h5>
        <h6 class="card-subtitle mb-2 text-muted"> by Developer from 9D</h6>
        <p class="card-text">in Design</p>
    </div>
</div>
</div>

正如我测试的那样，当使用 Chrome（在 Chrome 中截取的屏幕截图）、Edge 和 IE（都切断了卡的顶部和右侧）时会出现这个问题，但是 Firefox（开发版）做得很好，并且没有切断牌。

我还注意到，当卡片较少时，顶部出现在容器的底部： https ://i.imgur.com/8NJWV0Q.png

该网站暂时在http://nszabolcs.rf.gd/formsapp/

标签： jqueryhtmlbootstrap-4bootstrap-cards