Question

我有一个简单的四列卡布局（Bootstrap网格），它在移动设备上折叠为单列布局。我想在其中一张卡片中嵌入一篇Facebook帖子。问题是桌面上的Facebook嵌入式帖子不会像在移动设备上那样扩展/折叠以填充其父容器。我想知道的是，如果有办法解决这个问题。根据{{3}}，我的卡宽约270px，低于桌面的350px最小宽度。

我的容器就像一个简单的div：

<div class="content">
    <div class="fb-post" data-href="{{post.facebook_link}}">
        <!-- Here is what the embedded post's structure looks like -->
        <span>
            <iframe>
                <!-- Widget lives in here -->
            </iframe>
        </span>
    </div>
</div>

现在，当我在其中一张卡片中嵌入帖子时，帖子强制卡片展开，这会破坏我的布局（参见附件）。我正在寻找一种方法来强制帖子通过CSS / JS解决方案填充父容器或欺骗Facebook SDK以认为它在移动设备上。

我在这个问题上只遇到过their docs，但那个人明确地希望获得帖子的移动版本。在我的情况下，我不在乎它是移动版本还是桌面版本，只要我可以让它填充父容器。出于这个原因，这个问题不重复。

到目前为止，我已尝试操纵iframe和/或其父span元素的高度/宽度，但是一旦我调整这些数字，更改就会撤消，因为SDK会动态设置它们。

one other post

Answer 1

这方面的一个方法是，对我来说，是使用bootstrap 3 css使用隐藏和可见的div，并调整Facebook代码中的数据宽度以适应容器大小。如果你想要一个实例，我在我的网站link to page上使用了这个。我理解你使用的iframe，但这是我能为我的网站找到的唯一选择。我在这里提供了我的代码作为说明我的观点的指南，但是你可以比我更好地设计它，因为我是一个草率的编码器，我害怕......

https://jsfiddle.net/andydry1/6t5o2n8z/1/

data-adapt-container-width="true" *make sure this is set to true*

data-width="300" *change width to suit extra-small, small and large divs *

这不是你情况的确切答案;但它可能会提供一些帮助： - ）

在父容器中包含Facebook嵌入的帖子

1 个答案: