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

我有一个简单的四列卡片布局（引导网格），它在移动设备上折叠为单列布局。我想在其中一张卡片中嵌入一篇Facebook帖子。问题在于，Facebook在桌面上嵌入的帖子不会像在手机上那样展开/折叠以填充其父容器。我想知道的是是否有办法解决这个问题。我的卡宽约为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解决方案或欺骗FacebookSDK使其认为它是在移动设备上的，从而迫使帖子填充父容器

我只是在这个问题上遇到过，但那个人明确地想要这篇文章的移动版。在我的情况下，我不在乎它是移动版还是桌面版，只要我能让它填满父容器。因此，这个问题不是重复的

到目前为止，我已经尝试过操纵iframe和/或其父元素

span

元素的高度/宽度，但一旦我调整了这些数字，更改就会撤消，因为SDK正在动态设置它们

---

解决这个问题的一个方法是，使用bootstrap 3 css使用隐藏和可见的div，并调整facebook代码中的数据宽度以适应容器大小。如果你想要一个活生生的例子，我在我的网站上用了这个。我理解你使用iframe，但这是我能为我的网站找到的唯一选项。我在这里提供了我的代码，只是为了说明我的观点，但是你可以比我做得更好，因为我是一个邋遢的程序员，恐怕

---

这并不是你目前处境的确切答案；但是，它可能会提供一些帮助：-）

您不能在iframe中操作任何CSS，因为它来自另一个域。诱使SDK认为该设备是移动设备也不太可能成功，因为AFAIK使用用户代理嗅探作为决定设备是否“移动”的主要手段。

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 *