Twitter bootstrap 卡片栏嵌入推特：Chrome和其他浏览器的区别

我使用Boostrap 4个卡片栏在我的网站上分享推特

我注意到Chrome浏览器和其他浏览器之间的差异。事实上，Chrome在第二列和第三列中丢失了一些信息。您可以在捕获中看到这一点

你能帮我吗？对不起，我的英语很差，我是一个年轻的法语发展商。多谢各位

我使用以下代码：

重温一些第一件事：Twitter
widget.js应该只加载一次！您也可以在页面的
中引用它。另外，您应该使用引导的
4.0.0-beta.2
，而不是
4.0.0-beta.2

关于这个问题：

显然，Twitter在不同的浏览器上呈现出不同的小部件。在Firefox和Safari上，小部件目前以标准的
呈现，而在Chrome上，Twitter决定使用一种称为。事实上，根据canIUse.com在撰写本文时的说法，这项技术是可行的

虽然
完全隔离了根文档的css样式和iframe内容的css样式，但对于影子文档来说，这似乎并不完全正确。

在这种情况下，Twitter小部件的内部样式会干扰
.card
容器上设置的
列计数
css属性。这很可能是一个浏览器错误，并导致其他项目（如和）出现问题

当然，twitter的目的是保护小部件的样式不受页面其余部分css的影响。因此，修复小部件的内部样式不应该由您来完成。话虽如此，最干净的解决方案是不要像现在这样使用
.card columns

你可以做两个想法：


作为最快的解决方案，您可以使用由
.row
和
.col-4
组成的简单网格布局。如果所有的推特卡片都有相同的高度，这可能会很好地工作，但是如果卡片的高度不同，就会留下一些间隙。基本上这是：



重述一些问题，请编辑您的问题并在问题中包含代码。我添加了我的代码。非常感谢。