我正在设置twitter's embedded timeline,当你有一个固定的设计时,它很容易,但这不是我的情况,我实际上正在为一个新网站构建一个流畅的响应式设计。 / p>
我的问题是,如何设置twitter's embedded timeline具有流畅的宽度,因为它是一个iframe,你应该在你的推特账号中设置px中的with?
谢谢:)
答案 0 :(得分:13)
这似乎对我有用:
#twitter-widget-0 {
width:100%;
}
其中#twitter-widget-0是它生成的iframe,放在适当样式的容器中。 它并不完美:小部件根据宽度生成其内容有点不同,并且在调整大小后边距等不会完全相同;但这似乎很小。
我很好奇为什么简单的CSS不适合你 - 抱歉,如果我错过了什么。
答案 1 :(得分:5)
感谢大家,我找到了自己的方式: 这几乎就像缺乏说的那样,但我们不得不专注于iframe:
.MyClassForTheDivThatContainTheiFrame iframe{
width:100%;
}
当然.MyClassForTheDivThatContainTheiFrame也是流畅的%宽度
答案 2 :(得分:5)
此逻辑至少可以改变宽度和高度:
#twitter-widget-0, #twitter-widget-1 {
float: none;
width: 100% !important;
height: 250px !important;
}
缩短高度的唯一问题是它隐藏了人们发送推文的文本框,但确实缩短了高度。我的猜测是,如果你想添加其他CSS样式,你可以放置!important子句。我还假设如果你有三个小部件,你可以定义#twitter-widget-2等。
答案 3 :(得分:1)
超级hacky,但你也可以这样做:
<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>
答案 4 :(得分:1)
这是一个有用的主题,谢谢。我正在使用较旧的Twitter配置文件Widget的网站上工作,我发现它更容易定制。因此,另一种方法是使用它来显示Feed(自定义以适应):
<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 Developer Tools查看html / css。
希望能帮助别人!
答案 5 :(得分:0)
您可以为iframe提供一个类,并尝试将CSS应用于它。至少要将宽度更改为%。
答案 6 :(得分:0)
这是不可能的。您可以使用锚点选项卡中的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>
答案 7 :(得分:0)
如果你绝对必须做一个流畅的,你可以编写一个javascript,在调整大小事件或使用一些javascript计时器后改变iframe的宽度。
我们可以看到你的一些代码为此制作一些js代码吗?
答案 8 :(得分:0)