使用:引导 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