我使用 Boostrap 4 卡片列在我的网站上分享推文。
我注意到 Chrome 和其他浏览器之间的区别。事实上，Chrome 在第二列和第三列中丢失了一些信息。您可以在捕获中看到这一点。
你可以帮帮我吗 ？对不起我的英语，我是年轻的法国开发者。谢谢你。
我使用这段代码:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="card-columns">
<div class="card" style="border:none;">
<blockquote class="twitter-tweet" data-lang="fr"><p lang="en" dir="ltr">Recapping some of the 💯 Tweets from the past week.</p>— Twitter (@Twitter) <a href="https://twitter.com/Twitter/status/942094257472409600?ref_src=twsrc%5Etfw">16 décembre 2017</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>
<div class="card" style="border:none;">
<blockquote class="twitter-tweet" data-lang="fr"><p lang="en" dir="ltr">Recapping some of the 💯 Tweets from the past week.</p>— Twitter (@Twitter) <a href="https://twitter.com/Twitter/status/942094257472409600?ref_src=twsrc%5Etfw">16 décembre 2017</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>
<div class="card" style="border:none;">
<blockquote class="twitter-tweet" data-lang="fr"><p lang="en" dir="ltr">Recapping some of the 💯 Tweets from the past week.</p>— Twitter (@Twitter) <a href="https://twitter.com/Twitter/status/942094257472409600?ref_src=twsrc%5Etfw">16 décembre 2017</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>
<div class="card" style="border:none;">
<blockquote class="twitter-tweet" data-lang="fr"><p lang="en" dir="ltr">Recapping some of the 💯 Tweets from the past week.</p>— Twitter (@Twitter) <a href="https://twitter.com/Twitter/status/942094257472409600?ref_src=twsrc%5Etfw">16 décembre 2017</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>
<div class="card" style="border:none;">
<blockquote class="twitter-tweet" data-lang="fr"><p lang="en" dir="ltr">Recapping some of the 💯 Tweets from the past week.</p>— Twitter (@Twitter) <a href="https://twitter.com/Twitter/status/942094257472409600?ref_src=twsrc%5Etfw">16 décembre 2017</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>
<div class="card" style="border:none;">
<blockquote class="twitter-tweet" data-lang="fr"><p lang="en" dir="ltr">Recapping some of the 💯 Tweets from the past week.</p>— Twitter (@Twitter) <a href="https://twitter.com/Twitter/status/942094257472409600?ref_src=twsrc%5Etfw">16 décembre 2017</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>
</div>
</div>
</body>
</html>Chrome 捕获
Firefox、Safari .. 捕获
最佳答案
第一件事 :推特 widget.js应该只加载一次!您也可以在 <head> 中引用它的页面。此外，而不是 4.0.0-beta你应该使用 4.0.0-beta.2 Bootstrap 。
关于问题 :
显然 Twitter 在各种浏览器上呈现其小部件的方式不同。在 Firefox 和 Safari 上，小部件当前以标准 <iframe> 呈现。 ，而在 Chrome 上，Twitter 决定使用一种名为 Shadow DOM 的实验性技术。 .事实上，根据 canIUse.com 在撰写本文时的说法，这项技术是 supported only by Chrome .
而 <iframe>完全隔离了根文档的 css 样式和 iframe 内容的 css 样式，对于影子文档来说似乎并不完全正确。
在这种情况下，Twitter 小部件的内部样式会干扰 column-count。使用 .card-columns 设置的 css 属性在 .card容器。这很可能是一个浏览器错误，也会导致其他项目(例如 spin.js 和 jQuery-mobile )出现问题。
当然，Twitter 的目的是保护小部件的样式不受页面其余部分的 CSS 影响。所以不应该是你来修复小部件的内部样式。话虽如此，最干净的解决方案是不使用 .card-columns就像现在一样。
你可以做两个想法:
.row 组成的简单网格布局。和 .col-4 s。如果所有 Twitter 卡片的高度都相同，这可以完美地工作，但如果卡片的高度不同，则会给您留下一些空白。基本上这将是:<div class="container">
<div class="row">
<div class="col-4">
<div class="card" style="border:none;">
<blockquote class="twitter-tweet" data-lang="fr"><p lang="en" dir="ltr">Recapping some of the 💯 Tweets from the past week.</p>— Twitter (@Twitter) <a href="https://twitter.com/Twitter/status/942094257472409600?ref_src=twsrc%5Etfw">16 décembre 2017</a></blockquote>
</div>
</div>
<div class="col-4">
<div class="card" style="border:none;">
<blockquote class="twitter-tweet" data-lang="fr"><p lang="en" dir="ltr">Recapping some of the 💯 Tweets from the past week.</p>— Twitter (@Twitter) <a href="https://twitter.com/Twitter/status/942094257472409600?ref_src=twsrc%5Etfw">16 décembre 2017</a></blockquote>
</div>
</div>
<div class="col-4">
<div class="card" style="border:none;">
<blockquote class="twitter-tweet" data-lang="fr"><p lang="en" dir="ltr">Recapping some of the 💯 Tweets from the past week.</p>— Twitter (@Twitter) <a href="https://twitter.com/Twitter/status/942094257472409600?ref_src=twsrc%5Etfw">16 décembre 2017</a></blockquote>
</div>
</div>
<div class="col-4">
<div class="card" style="border:none;">
<blockquote class="twitter-tweet" data-lang="fr"><p lang="en" dir="ltr">Recapping some of the 💯 Tweets from the past week.</p>— Twitter (@Twitter) <a href="https://twitter.com/Twitter/status/942094257472409600?ref_src=twsrc%5Etfw">16 décembre 2017</a></blockquote>
</div>
</div>
<div class="col-4">
<div class="card" style="border:none;">
<blockquote class="twitter-tweet" data-lang="fr"><p lang="en" dir="ltr">Recapping some of the 💯 Tweets from the past week.</p>— Twitter (@Twitter) <a href="https://twitter.com/Twitter/status/942094257472409600?ref_src=twsrc%5Etfw">16 décembre 2017</a></blockquote>
</div>
</div>
<div class="col-4">
<div class="card" style="border:none;">
<blockquote class="twitter-tweet" data-lang="fr"><p lang="en" dir="ltr">Recapping some of the 💯 Tweets from the past week.</p>— Twitter (@Twitter) <a href="https://twitter.com/Twitter/status/942094257472409600?ref_src=twsrc%5Etfw">16 décembre 2017</a></blockquote>
</div>
</div>
</div>
</div>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://platform.twitter.com/widgets.js"></script>masonry.js ，它可以做与 .card-columns 相同的事情尝试这样做，但它使用 javascript 来做到这一点。 或者，您可以查看下面的脚本，我不建议在生产中使用它，因为它非常 hackish。似乎当前小部件的影子框位于
open模式，因此可以访问呈现的小部件的内容并对其进行一些更改。所以我想出了下面的脚本来快速修复内部样式。 (不幸的是，我可以让回复和转发的图标显示出来。)这是工作Codepen sample .// Wait for `widgets.js` to get loaded
window.addEventListener('load', function() {
// Twitter get initialised
twttr.ready(function(twttr) {
// A widget item finished rendering
twttr.events.bind('rendered', function(event) {
// event.target is the <twitterwidget> node
var widget = event.target,
shadow;
// Feature detection, if shadowRoot is in use
if (!(shadow = widget.shadowRoot)) {
return;
}
// Fixing some styles
shadow.innerHTML += '<style>.Avatar, .Tweet-body {position: relative;}</style>';
});
});
});
关于twitter-bootstrap - 卡片列嵌入推文 : Difference Between Chrome and other browsers，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47854452/