用于 Twitter 小部件宽度的 HTML/CSS

问题描述

Twitter 提供的用于粘贴到 html 中的代码如下所示:

The code Twitter gives you to paste in the html looks like this:

<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.当放置在我的网站上时，我得到了这个(查看源代码时):

They allow you to set a height, which I set to 600. When placed on my site I get this (when viewing the source):

<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 宽度在页面的一半多一点，并显示一个丑陋的滚动条.

The 220 width is what is killing me. I want the width to be the full width of the container, which is 100% (for a mobile site). Currently the 220 width goes a little more than halfway across the page and displays an ugly scrollbar.

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

So, why is it setting the width to 220, and how can I get it to expand to it's parent width?

推荐答案

我使用响应式主题，这个 css 代码运行良好.谢谢 Hjuster.

I use a responsive theme and this css code works fine. Thanks Hjuster.

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

这篇关于用于 Twitter 小部件宽度的 HTML/CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！