twitter-bootstrap 在响应式网站上嵌入 Facebook 帖子
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/39068479/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Embedding facebook post on responsive website
提问by sebap123
I want to embed some Facebook posts (images) on my website, which is intended to be responsive. I am using bootstrap as a main frame for everything and it is very easy to get typical image responsiveness.
我想在我的网站上嵌入一些 Facebook 帖子（图片），这是为了响应。我使用引导程序作为所有内容的主要框架，很容易获得典型的图像响应能力。
Unfortunately with Facebook posts those are iframeobjects and they don't want to scale so nicely.
不幸的是，对于 Facebook 帖子，这些都是iframe对象，他们不想很好地扩展。
For my tests I am using this iframe:
对于我的测试，我使用了这个 iframe：
<div class="iframe_div">
<div>Title</div>
<div>
<iframe src="https://www.facebook.com/plugins/post.php?href=https%3A%2F%2Fwww.facebook.com%2FKickstarter%2Fphotos%2Fa.10152384621799885.1073741831.73182029884%2F10154511546454885%2F%3Ftype%3D3&width=500" style="border:none;overflow:hidden;width:100%;height:100%;position:absolute;left:0;" scrolling="no" frameborder="0" allowTransparency="true"></iframe>
</div>
<div>Tekst</div>
</div>
My problem is that when I am changing the size of the window I can sometimes see whole post and other time only top half of it. Well, more precisely it is gradually changing between those two values. Good thing is that it is never too wide, but it is not height enough to display whole.
我的问题是，当我改变窗口的大小时，我有时可以看到整个帖子，而其他时候只能看到它的上半部分。嗯，更准确地说，它正在这两个值之间逐渐变化。好消息是它永远不会太宽，但它的高度不足以显示整体。
Another issue is that it overlays the text below it, and only if I'll set some fixed value for iframe_divI am able to see it, but then it is not responsive design.
另一个问题是它覆盖了它下面的文本，只有当我设置一些固定值iframe_div才能看到它时，但它不是响应式设计。
Does anyone managed to embed facebook post in responsive design page?
有没有人设法在响应式设计页面中嵌入 Facebook 帖子？
回答by Jhoedram
Replace this piece at the end of srcvalue:
在src值的末尾替换此部分：
&width=500
&width=500
For this:
为了这：
&width=auto
&width=auto
And put this attribute into iframetag:
并将此属性放入iframe标记中：
style="width: 100%"
style="width: 100%"
回答by Hamonbatra
you have to style the container of iframe try this :
你必须设计 iframe 的容器试试这个：
.post-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 35px;
height: 0;
overflow: hidden;
}
you also need to style iframe like :
您还需要将 iframe 样式设置为：
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
you can customize padding for your post.
您可以为您的帖子自定义填充。
