1

http://developers.facebook.com/docs/reference/plugins/comments/

这是我在页面上包含 Facebook javascript SDK 后生成评论区域的方式：

<div class="fb-comments fb-comments-update" data-href="http://site.com" data-width="600" data-colorscheme="light" data-num-posts="10" data-order-by="social" data-mobile="auto-detect"></div>

如您所见，facebook 根据您提供的此数据属性设置评论区域的宽度：

data-width="600"

在这种情况下，我告诉 facebook 我希望该区域为 600 像素。但我目前正在构建一个响应式站点，并且需要评论部分以 100% 适应屏幕的宽度。不做这些工作：

data-width="100"
data-width="100%"

有什么方法可以让 facebook 评论的宽度变宽吗？

4

2 回答 2

5

试试这个代码：

<style>.fb-comments, .fb-comments iframe[style], .fb-like-box, .fb-like-box iframe[style] {width: 100% !important;}
.fb-comments span, .fb-comments iframe span[style], .fb-like-box span, .fb-like-box iframe span[style] {width: 100% !important;}
</style>
于 2013-12-15T20:13:46.133 回答
1

第一个尺寸适用于小于 1200 像素和大于 979 像素的设备。有时唯一的问题是 IE，但您可以使用类似的东西：width: 1200px\9;- IE 8 及更高版本

此示例来自我经常使用的bootstrap 。要使用它，您需要更少的win 版本。但是这段代码可以在浏览器中运行（旧的 IE 除外）。

.fb-comments { width: 490px; /* or width: 50%; */ }

/* Large desktop */
@media (min-width: 1200px) {
    .fb-comments { width: 600px; /* or width: 50%; */ }
}

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) {
    .fb-comments { width: 400px; /* or width: 50%; */ }
}

/* Landscape phone to portrait tablet */
@media (max-width: 767px) {
    .fb-comments { width: 30px; /* or width: 50%; */ }
}

/* Landscape phones and down */
@media (max-width: 480px) {
    .fb-comments { width: 200px; /* or width: 50%; */ }
}

也尝试使用百分比，而不是像素，即使有填充，例如：

.fb-comments { width: 90%; height: auto; padding: 0 5%; }
于 2013-04-11T15:47:35.120 回答