Question

使用：Bootstrap 4.3.1和jQuery 3.4.1

我正在制作一个Web应用程序，该应用程序在.card-columns容器内生成许多引导卡。当用户将鼠标悬停在卡上时，它会按比例放大（使用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/上临时访问

在.card-columns内的card元素上使用scale（）会剪切第一行的顶部

0 个答案: