Question

我在我的页面上设置了以下用于显示facebook插件的代码：

<label for="folio">Folio:</label>
      <input type="text" value="<?=$folio?>" name="folio"  disabled/>
        <input type="hidden" value="<?=$folio?>" name="folio"  />

直到几天前，这个工作正常。现在由于某种原因，它似乎仍然坚持180px的宽度 - 但在代码中它表示280px。有谁知道这是为什么？请在此处查看：www.bikefinder.no（图片左侧的插件）。

感谢您的投入！

Answer 1

正如Page Plugin doc上的文档在自适应宽度标题下所述：

在页面加载时，您的容器可能是0 px或display: none。
插件尝试达到最小宽度，在这种情况下为180px
因此，如果您确保您的容器有wdith >= configured_width，那么它应该有效。

代码：

<div style="min-width: 180px">
    <div class="fb-page" data-hide-cover="true" data-href="https://www.facebook.com/bikefinders" data-show-facepile="false" data-show-posts="true" data-width="180" style="float: left; margin: 10px;">
</div>

// min-width would ensure its 180px or greater

Answer 2

它检查父（容器）宽度，它覆盖data-width属性。例如，您可以将其包装在固定宽度的div中。

<div style="width:300px">
<!--Page plugin's width will be 300px no matter what you set in data-width-->
  <div class="fb-page" ... 

</div>

顺便说一下，在页面加载期间应该可以看到容器及其父项，否则它将被读为0.

您可以阅读更多详情here

Facebook页面插件宽度不适用

2 个答案: