是否可以为 Facebook 的社交插件设置流体宽度? [英] Is it possible to set a fluid width for Facebook's social plugins?

问题描述

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

I'm developing a site around the "responsive design" concept, but the facebook social plugins are static width and "break" the layout when it's re-sized.

使用媒体查询，我将插件设置为在低分辨率浏览器(移动设备等)上隐藏.然而，在桌面浏览器上，当浏览器窗口被重新调整为更小，但不能小到隐藏插件时，它们会脱离布局.

Using media queries, I've set the plugins to hide on low-res browsers (mobile, etc...). However, on desktop browsers, when the browser window is re-sized smaller, but not so small to hide the plugins, they break out of the layout.

有没有办法为 Facebook 社交插件设置流体宽度?

Any way to set a fluid width for the Facebook social plugins?

推荐答案

正确的工作答案是我在这里找到的东西的组合.Mikel 的回答是一个好的开始:

The correct working answer is a combination of things I found here. Mikel's answer is a good start:

Facebook 开发者平台链接

这说:

我们已经为此推送了一个修复程序.从现在开始，您可以指定宽度为 100%(例如 data-width="100%")以获得流畅的布局.文档是也更新了:https://developers.facebook.com/docs/plugins/comments感谢您的耐心等待.

We have pushed a fix for this. From now on, you can specify the width as 100% (e.g. data-width="100%") to get a fluid layout. Docs are updated too: https://developers.facebook.com/docs/plugins/comments Thanks for your patience.

但是...这将在加载时加载插件可用的宽度.当您调整页面大小时，它将保持加载页面时的宽度.要解决此问题 - 并制作 Facebook 社交插件的真正响应版本 - 在您的 CSS 中添加以下内容:

But... This will load the width of what's available to the plugin at loading time. When you resize your page it will remain the same width it had when you loaded the page. To fix this - and make a true responsive version of the Facebook Social Plugin - Add the following in your CSS:

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

这将导致插件在您调整窗口大小时调整到可用空间.

This will cause the plugin to resize to the available space as you resize the window.

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

If you want this code to work for the page plugin, change the class-name 'fb-comments' to 'fb-page':

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

(感谢添加 Black_Stormy！)

(thanks for the addition Black_Stormy!)

这篇关于是否可以为 Facebook 的社交插件设置流体宽度?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！