Javascript 引导卡柱砌体效果-更改高度卡跳跃

我使用引导卡。如果用户点击一个按钮（在卡片内部），卡片的高度就会改变（我会动态添加卡片的页脚）

问题是，在特殊星座中，牌会改变位置，看起来有点“神经质”

我设置了这个jsfiddle。只需点击第一张卡片选择按钮，你就会看到其中的卡片会跳到右边。 （可能会更改窗口大小，直到您有4张相邻的卡）

编辑：如果你不能重新创建bug，你可能需要调整一下屏幕大小。但是我制作了一个小gif，你可以看到这个bug：

$（'.ccs产品计数器'）。在（'click'，函数（e）上{
让selectedProductID=$（this.find（'span.badge'）.attr（“数据产品id”）；
if（！$（'#undo-p-id-'+selectedProductID）.hasClass（“UndoIsVisible”））{
$（“#undo-p-id-”+selectedProductID）.removeClass（'d-none'）；
$（“#undo-p-id-”+selectedProductID）.addClass（'fadeInDown'）；
$（“#undo-p-id-”+selectedProductID）.addClass（'UndoIsVisible'）；
$（“#card-p-id-”+selectedProductID）.addClass（'AnimationRunning'）；
setTimeout（函数（）{
$（“#undo-p-id-”+selectedProductID）.removeClass（'fadeInDown'）；
$（“#card-p-id-”+selectedProductID）.removeClass（'AnimationRunning'）；
}, 800);
}
});
@介质（最小宽度：34em）{
.卡片栏{
-webkit列数：2；
-moz列数：2；
列数：2；
}
}
@介质（最小宽度：48em）{
.卡片栏{
-webkit列数：3；
-moz列数：3；
列数：3；
}
}
@介质（最小宽度：62em）{
.卡片栏{
-webkit列数：4；
-moz列数：4；
列数：4；
}
}
@介质（最小宽度：75em）{
.卡片栏{
-webkit列数：4；
-moz列数：4；
列数：4；
}
}

标题

字幕


Lorem ipsum dolor sit amet


价格：2美元


股票：5只

选择0
撤消选择
标题

字幕


描述检测人员的情况，使用直径和非直径临时测量仪


价格：2美元


股票：5只

选择0
撤消选择
标题

字幕


描述。Lorem ipsum dolor sit amet，Conseteteur sadipscing Eliter，sed diam nonumy eiption


价格：2美元


股票：5只

选择0
撤消选择
标题

字幕


第二种是同花同花，第二种是同花同花同花


价格：2美元


股票：5只

选择0
撤消选择
标题

字幕


沃卢普塔。在vero eos和accusam以及justo duo dolores和ea Reum。斯泰特·克莱塔·卡斯德·古伯格伦（Stet clita kasd gubergren），没有海洋保护区


价格：2美元


股票：5只

选择0
撤消选择
您应该尝试此解决方案，在这里您可以动态显示和隐藏按钮

<button type="button" class="btn btn-primary center-margin-0-auto ccs-product-counter">Select <span id="add-p-id-1" class="badge badge-light" data-product-id="1">0</span></button> 

<button type="button" class="btn btn-secondary" style="float:right">Undo</button>

选择0
撤消
发生问题的原因是您正在将
撤消按钮添加到卡的底部，这将破坏将重新排列的
卡列的布局。要避免此问题，请在卡的底部设置一个静态撤消按钮，并将其禁用，直到用户单击选择按钮。通过此污垢修复，您将确保卡的高度始终相同，并且布局不会改变
 我增加了窗口大小，并测试了4列。我没有看到任何“跳跃”对不起。。。错误链接：您可以动态更改“提交”按钮，而不是添加页脚。因为用户可以多次单击“选择”按钮（它计算所选内容），所以它不能是“撤消”按钮。如果我的问题没有解决方案，那么默认情况下我可以显示“撤消”按钮。@egolive，我有另一个建议，我们在“选择”按钮的右侧有空白。我们可以把撤销按钮放在那里。