Facebook页面插件宽度不适用

Question

我正在尝试实施Facebook Page Plugin。我将宽度设置为500，但它始终保持在280px。

<div id="facebook-feed" style="text-align: center">
            <div class="fb-page zdepth-1" data-width="400" data-href="https://www.facebook.com/facebook" data-hide-cover="false" data-show-facepile="true" data-show-posts="true"></div>
</div>

我做错了什么？

Answer 1

文件不佳的情况：

父元素只能在一个方向上覆盖插件宽度 - 通过挤压它。设置data-width="500"（最大值）并使您的包装元素更小，例如：width: 280px;

Answer 2

页面插件尝试适合较小的容器/屏幕

• 如果容器比配置的宽度更小，插件会自动呈现较小的宽度（以适应较小的屏幕）。

• 假设容器挤在手机上，它会尝试在较小的屏幕上很好地呈现。

因此，在您的情况下，持有插件的容器小于配置的宽度，即500px。

Answer 3

虽然在没有其余代码的情况下很难对此进行测试，但您应该可以通过将width="500px"直接添加到HTML中来调整div类的宽度。

这种方法对我来说特别适用于不同的嵌入方式，包括facebook插件。

如果您选择使用CSS添加，请尝试添加：

.fb-page zdepth-1 {width:500px;}

Answer 4

尝试使用

.fb-page zdepth-1 {width:500px !important;}

Answer 5

不知何故

.fb_iframe_widget {width:500px !important;}

有时对我有用。但我终于弄明白究竟是什么导致了这个问题。我把插件包装在div中，显示设置为none。我将其更改为内联块，现在可以正常工作。