Twitter小部件宽度的HTML/CSS

Question

代码Twitter让你粘贴html看起来像这样:

<a class="twitter-timeline" href="https://twitter.com/username" data-widget-id="248169276782018560">Tweets by @username</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>

它们允许你设置一个高度,我将其设置为600.当放置在我的网站上时,我得到了这个(查看源代码时):

<iframe id="twitter-widget-6" classname="twitter-timeline twitter-timeline-rendered" scrolling="no" frameborder="0" style="border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; " width="220" height="600"></iframe>

220宽度正在杀死我.我希望宽度是容器的整个宽度,这是100%(对于移动站点).目前,220宽度超过页面的一半,并显示一个丑陋的滚动条.

那么,为什么将宽度设置为220,我怎样才能将它扩展到它的父宽度？

Answer 1

我使用响应主题,这个CSS代码工作正常.谢谢Hjuster.

#twitter-widget-0 { 
      width: 100% !important; 
    }

Answer 2

Twitter的,您可以通过HTML宽度调整时间线窗口小部件的宽度和高度,高度属性,但他们接受的最小宽度为220 pixels例子:width="220",height="350"

FROM Twitters developers页面:时间轴的最小宽度为220px,最大宽度为520px.最小高度为350px.

Answer 3

您可以通过在"twitter-timeline"类定义中设置其值来更改窗口小部件的宽度,如下所述:

https://dev.twitter.com/docs/embedded-timelines

例如,一个宽度为280,高度为300的推特时间线小部件就是这样的:

<a class="twitter-timeline" width="280" height="300" href="https://twitter.com/YOURTWITTERUSERNAMEHERE" data-widget-id="YOURWIDGETIDHERE">Tweets by @YOURTWITTERUSERNAMEHERE</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 4

尝试更改width="220"为width="100%".