Bootstrap 4 Cards（CSS3多列错误）（Chrome IE）后如何修复白色空白？ [英] How to fix a white gap after Bootstrap 4 Cards (CSS3 multi-columns bug)(Chrome IE )?

问题描述

我在Chrome和IE上有非常恼人的错误（On Fire Fox看起来很好）。我不太确定哪些元素或元素正在做这件事。

关于该错误：如果向下滚动，您可以看到Bootstrap卡片之间的白色差距他们和页脚。

错误所在的URL：我有删除我的网址（Stackoverflow规则...对不起家伙）

我一直在使用Google Chrome Inspect尝试找出问题所在，但我没有运气。这就是为什么我在这里问的原因，因为我可以看到问题所在。

我唯一的线索是：
- 错误不在任何JS文件或任何外部CSS文件，我认为我的CSS中有这样做。
- 它不是位置：relative或overflow：隐藏在类dtl24中，因为我试图删除它们并在没有它们的情况下更新我的CSS，并且错误仍然存​​在。

另外，我想向您道歉。我试图用代码创建一个代码片段，但没有图片，这个bug不明显。

你知道错误在哪里，我怎么修复它？

感谢

解决方案

这是已知问题与CSS3多列，可能会导致在底部。这个问题只有解决方法，并取决于具体的布局。

您可以尝试使用...

  .card-columns .card {
 display：flex; 
 page-break-inside：avoid; 
闯入：避免; 
} 
  

但是，您可能需要最终在底部使用较大的负边距Chrome / Webkit浏览器的容器：

  .card-columns {
 -webkit-margin-after：-300px ; 
 overflow：hidden; 
} 
  

I have very annoying bug on Chrome and IE (On Fire Fox it looks fine). I am not really sure what element or elements are doing this.

About the bug: If you scroll down, you can see where the Bootstrap cards end a big white gap between them and the footer.

URL where the bug is: I have to remove my URL (Stackoverflow rules...sorry guys)

I have been using Google Chrome Inspect to try to find where the problem is but I did not have luck. That is the reason why I am asking here because I can see where the problem is.

The only clues I have are: - The bug is not in any JS file or in any extern css file, I think there is something in my CSS is doing this. - It is not the position:relative or the overflow:hidden form the class dtl24, because I have tried to delete them and updated my CSS without them and the bug was still there.

Also, I would like to apologize to you. I have tried to create a snippet with the code but without the images, the bug not appreciable.

Do you know where is the bug and how I could fix it please?

Thanks

解决方案

This is a known issue with CSS3 multi-columns that can cause a gap at the bottom. There are only workarounds for this issue, and depend on the specific layout.

You can try using...

.card-columns .card {
    display: flex;
    page-break-inside: avoid;
    break-inside: avoid;
}

But, you may need to ultimately use a large negative margin at the bottom of the container for Chrome / Webkit browsers:

.card-columns {
   -webkit-margin-after: -300px;
   overflow: hidden;
}

这篇关于Bootstrap 4 Cards（CSS3多列错误）（Chrome IE）后如何修复白色空白？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！