我在this page上运行了Twitter嵌入时间轴。
通过CSS，我添加了以下类：
.twitter-timeline {
min-width: 100% !important;
直到昨天，这个CSS成功地将时间轴扩展到内容区域的整个宽度，但今天风格不起作用。
我可以看到Twitter在iframe中运行了以下样式：
.timeline {
max-width: 520px;
我认为这是Twitter最近添加的内容。我能做些什么来覆盖这个吗？我已经尝试将以下内容添加到我的CSS类中，但它没有工作：
.twitter-timeline {
min-width: 100% !important;
width: 100% !important;
我知道我可以使用Twitter API创建自定义Feed，但我们无法访问艺术家Twitter帐户来生成访问令牌等。
答案 0 :(得分：6)
如上所述，twitter目前不允许其时间轴小部件获得100％的宽度。对于响应式网站而言，这是一个痛苦但有一个解决方案（目前）。
在twitter embed脚本上使用回调并将其指向一个改变iframe样式的函数。
使用Jquery的解决方案
用此替换你的twitter嵌入代码（在<a>标签下）。
<script>
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';
if(!d.getElementById(id)){
js=d.createElement(s);js.id=id;
js.src=p+"://platform.twitter.com/widgets.js";
js.setAttribute('onload', "twttr.events.bind('rendered',function(e) {responsiveTwitterWidget()});");
fjs.parentNode.insertBefore(js,fjs);
}}(document,"script","twitter-wjs");
function responsiveTwitterWidget(){
var widget = $("#twitter-widget-0");
var frame_style = widget.attr('style');
widget.attr('style', frame_style + ' max-width:none !important; width:100%');
if(widget) {
var head = widget.contents().find("head")
if (head.length) {
head.append('<style>.timeline { max-width: 100% !important; width: 100% !important; } .timeline .stream { max-width: none !important; width: 100% !important; }</style>');
}
widget.append($('<div class=timeline>'));
}
}
</script>
如果页面上有多个时间轴小部件，则需要进行调整。
可能不适用于某些较旧的IE浏览器。
答案 1 :(得分：1)
这对我有用。
<强> CSS
iframe[id^='twitter-widget-0'] {
height:600px !important;
margin-bottom:10px !important;
width:100% !important;
}
<强>的Javascript
$(window).on('load', function () {
$('iframe[id^=twitter-widget-]').each(function () {
var head = $(this).contents().find('head');
if (head.length) {
head.append('<style>.timeline { max-width: 100% !important; width: 100% !important; } .timeline .stream { max-width: none !important; width: 100% !important; }</style>');
}
$('#twitter-widget-0').append($('<div class=timeline>'));
})
});
在上网时找到解决方案。
https://wordpress.org/support/topic/how-can-create-full-width-twitter-timeline-on-responsive-page
答案 2 :(得分：1)
简单而有效：
$('.twitter-timeline').css({width: '100%'});
答案 3 :(得分：1)
我们最近发现publish.twitter.com上Twitter的用于嵌入式个人资料时间轴的相当新的代码生成器仍然会造成时间轴溢出iOS设备的容器宽度的问题，尤其是宽度和高度设置（并且没有数据-推特限制设置）。
已经尝试了上述所有javascript解决方案来将timelime width保持为容器的100％，但将时间轴限制为不超过容器的宽度，我们通过添加此CSS来完成此操作（选择器可能通过您的其他特异性，如果需要）：
li
请注意，您可能要确保设置了视口，也许是这样（但要适合您的实现）：
.twitter-timeline {
width: 100vw !important;
}
还请注意，旧的rinkle-to-fit = no hack在现代iOS中似乎不再起作用
答案 4 :(得分：0)
您需要使用javascript。
以下是jQuery的解决方案：
$("iframe[id^='twitter-widget-']").contents().find(".timeline").css("maxWidth", "none");
答案 5 :(得分：0)
您可以将外部css文件附加到twitter iframe中，此示例背景应更改为浅蓝色。
<script type="text/javascript">
$(window).load(function () {
function changeWidget() {
var twFrame = $('iframe#twitter-widget-0');
if (twFrame.length > 0) {
twFrame.contents()
.find('head').append('<link href="http://www.w3schools.com/css/mystyle.css" rel="stylesheet" type="text/css" media="all" />');
} else {
setTimeout(changeWidget, 1500);
}
}
changeWidget();
});
</script>
附加您自己的css位置，其中包含：
.timeline{
max-width: 100% !important;
}
答案 6 :(得分：0)
<强>的javascript
$(document).ready(function() {
window.twttr = (function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0], t = window.twttr || {};
if (d.getElementById(id)) return t;
js = d.createElement(s);
js.id = id;
js.src = "https://platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js, fjs);
t._e = [];
t.ready = function(f) {
t._e.push(f);
};
return t;
}(document, "script", "twitter-wjs"));
twttr.ready(function(twttr) {
$(".tweet").each(function() {
twttr.widgets.createTweet($(this).data("id"), $(this)[0], {cards: "hidden"}).then(function(el) {
$(el).contents().find('.EmbeddedTweet').css('max-width', '800px');
});
});
});
});
<强> HTML
<div class="tweet" data-id="705128887810965504"></div>
答案 7 :(得分：0)
实际上，它只是从data-width中删除了data-height和<a class="tweeter-timeline"属性对我有用
<div class="col-xs-12 col-md-2...">
<a class="twitter-timeline">...</a>
答案 8 :(得分：0)
您需要手动插入其iFrame并自己修改CSS。
<body onload="onLoad()">
<script>
function onLoad() {
var twitter_iframe = document.getElementById('twitter-widget-0');
var twitter_document = twitter_iframe.contentDocument || twitter_iframe.contentWindow.document;
var twitter_timeline = twitter_document.getElementsByClassName("timeline-Widget")[0];
twitter_timeline.style = "left:0;right:0;margin:auto;padding:auto;min-width:100%;";
}
</script>
注意：显然，如果他们调整他们的JS，这可能会停止工作，但是好消息是它不会破坏您的页面或其他内容，它只是会回到没有100％的宽度。
我对此进行了更强大的攻击，因为有时在调用body的onLoad之后加载twitter提要。几乎在所有情况下，以下方法也将抓住这些障碍：
function onLoad() {
resizeTwitterFeed();
setTimeout(function(){ resizeTwitterFeed(); }, 100);
setTimeout(function(){ resizeTwitterFeed(); }, 250);
setTimeout(function(){ resizeTwitterFeed(); }, 500);
setTimeout(function(){ resizeTwitterFeed(); }, 750);
setTimeout(function(){ resizeTwitterFeed(); }, 1000);
setTimeout(function(){ resizeTwitterFeed(); }, 2000);
setTimeout(function(){ resizeTwitterFeed(); }, 3000);
setTimeout(function(){ resizeTwitterFeed(); }, 5000);
setTimeout(function(){ resizeTwitterFeed(); }, 10000);
}
function resizeTwitterFeed() {
var twitter_iframe = document.getElementById('twitter-widget-0');
if (twitter_iframe) {
var twitter_document1 = twitter_iframe.contentDocument;
if (twitter_document1) {
var twitter_timeline1 = twitter_document1.getElementsByClassName("timeline-Widget")[0];
if (twitter_timeline1) {
twitter_timeline1.style = "left:0;right:0;margin:auto;padding:auto;min-width:100%;";
}
}
var twitter_document2 = twitter_iframe.contentWindow.document;
if (twitter_document2) {
var twitter_timeline2 = twitter_document2.getElementsByClassName("timeline-Widget")[0];
if (twitter_timeline2) {
twitter_timeline2.style = "left:0;right:0;margin:auto;padding:auto;min-width:100%;";
}
}
twitter_iframe.onload = function() {
resizeTwitterFeed();
return true;
}
}
}