我期待建立Twitter的嵌入时间轴 ，它很容易，当你有一个固定的设计，但是这不是我的情况，我实际上建立一个流畅性和响应设计的一个新网站。
我的问题是，我怎么能建立Twitter的嵌入时间轴与流体宽度，因为它的一个iframe，你应该建立在你的Twitter帐户PX？
谢谢 ：）
Answer 1:
这似乎为我工作：
#twitter-widget-0 {
width:100%;
}
其中＃Twitter的插件-0是它产生的IFRAME，放置在适当风格容器。 它并不完美：小工具生成的内容有点不同，这取决于宽度和边距等不会调整后完全一样; 但这似乎较小。
我很好奇，为什么简单的CSS没有为你工作 - 如果我失去了一些东西抱歉。
Answer 2:
感谢所有的你，我发现我的方式通过：这是几乎没有说，但我们必须把重点放在iframe中，而不是：
.MyClassForTheDivThatContainTheiFrame iframe{
width:100%;
}
当然.MyClassForTheDivThatContainTheiFrame还设有一％的宽度流体
Answer 3:
该逻辑将工作以改变至少宽度和高度：
#twitter-widget-0, #twitter-widget-1 {
float: none;
width: 100% !important;
height: 250px !important;
}
与缩短高度唯一的问题是，它隐藏的文本框中，为人们发微博，但它确实缩短的高度。 我的猜测是，如果你想添加其他的CSS样式，你可以只是把！重要条款。 我也认为如果你有三个小工具，你会定义＃叽叽喳喳的小部件-2等。
Answer 4:
超级哈克，但你也可以这样做：
<script type="text/javascript">
var checkTwitterResize = 0;
function resizeTwitterWidget() {
if ($('#twitter-widget-0').length > 0) {
checkTwitterResize++;
if ($('#twitter-widget-0').attr('width') != '100%') checkTwitterResize = 0;
$('#twitter-widget-0').attr('width', '100%');
// Ensures it's checked at least 10 times (script runs after initial resize)
if (checkTwitterResize < 10) setTimeout('resizeTwitterWidget()', 50);
} else setTimeout('resizeTwitterWidget()', 50);
}
resizeTwitterWidget();
</script>
Answer 5:
这是一个有用的线索，谢谢。 我正在使用的旧Twitter个人资料的Widget，我觉得这更容易定制网站。 这样一种替代方法，使用该显示进料（定制，以适应）：
<script>
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 5,
interval: 6000,
width: 300,
height: 400,
theme: {
shell: {
background: 'transparent',
color: '#151515'
},
tweets: {
background: 'transparent',
color: '#151515',
links: '#007dba'
}
},
features: {
shell: false,
scrollbar: true,
loop: false,
live: true,
hashtags: true,
timestamp: true,
avatars: true,
behavior: 'all'
}
}).render().setUser('BlueLevel').start();
</script>
然后通过添加给你的样式表覆盖宽度：
.twtr-doc {
width:100% !important;
}
你可以看到各个阶级在兼容模式下使用IE9，然后使用F12开发人员工具查看HTML / CSS修改。
希望可以帮助别人！
Answer 6:
你可以给你的iframe的一类，并尝试应用CSS它。 至少与宽度改变为％。
Answer 7:
这是不可能的。 您可以使用在锚标签的HTML宽度和高度设置一个确切的宽度和高度。 除此之外，你的运气了。 无响应或液体的能力。
它也有一个220px最小宽度和520px一个最大宽度。
<a class="twitter-timeline" width="520" height="700" data-dnt=true href="https://twitter.com/vertmob" data-widget-id="WIDGET_ID_HERE">Tweets by @vertmob</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
Answer 8:
如果你绝对必须做的液体，可以编写一个调整大小事件后或使用一些JavaScript计时器，其改变iframe的宽度的JavaScript。
我们可以看到你的一些代码，使一些JS代码呢？
Answer 9:
属性选择应该工作：
iframe[id*="twitter-widget"] {
width: 100%;
}
更多在这里 。
文章来源: How to set up twitter's embedded timeline width in percentage (responsive/fluid design)
