是否可以为Facebook的社交插件设置流畅的宽度？

2018-06-21 16:41:34

我正在开发一个围绕“响应式设计”概念的网站，但facebook社交插件是静态宽度，并在重新调整大小时打破布局。

使用媒体查询，我将插件设置为隐藏在低分辨率浏览器（手机等）上。但是，在桌面浏览器上，当浏览器窗口重新缩小尺寸但不会太小以隐藏插件时，它们就会脱离布局。

任何方式为Facebook社交插件设置流体宽度？

正确的工作答案是我在这里找到的东西的组合。米克尔的回答是一个好的开始：

Facebook开发者平台链接

这说：

我们已经为此做了一个修复。从现在开始，您可以将宽度指定为100％（例如data-width =“100％”）以获得流畅的布局。 Google文档也进行了更新：https：//developers.facebook.com/docs/plugins/comments感谢您的耐心等待。

但是...这会在加载时加载插件可用的宽度。当您调整页面大小时，它将保持与加载页面时相同的宽度。为了解决这个问题 - 并制作Facebook社交插件的真实响应版本 - 在CSS中添加以下内容：

.fb-comments, .fb-comments iframe[style], .fb-comments span {
   width: 100% !important;
}

这会导致插件在调整窗口大小时调整为可用空间。

如果您希望此代码适用于页面插件，请将类名'fb-comments'更改为'fb-page'：

.fb-page, .fb-page iframe[style], .fb-page span {
    width: 100% !important;
}

（感谢您加入Black_Stormy！）

这些方法都没有奏效，但使用这个想法，以下工作适用于我：

.fb-comments, .fb-comments span, .fb-comments.fb_iframe_widget span iframe {
    width: 100% !important;
}

我找到了一个使用CSS的解决方案。灵感来自这篇文章http://css-tricks.com/2708-override-inline-styles-with-css/

.fb-comments, .fb-comments iframe[style] {width: 100% !important;}

链接地址: http://www.djcxy.com/p/60913.html