7

我正在寻找设置twitter 的嵌入式时间线，当你有一个固定的设计时，这很容易，但这不是我的情况，我实际上正在为一个新网站构建一个流畅和响应式的设计。

我的问题是，我如何设置twitter 的嵌入式时间线，因为它是一个 iframe 并且你应该在你的 twitter 帐户中设置 with in px ？

谢谢 ：）

4

9 回答 9

13

这似乎对我有用：

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

其中 #twitter-widget-0 是它生成的 iframe，放置在适当样式的容器中。它并不完美：小部件根据宽度生成其内容略有不同，并且调整大小后边距等不会完全相同；但这似乎微不足道。

我很好奇为什么简单的 CSS 不适合你——如果我遗漏了什么，我很抱歉。

于 2012-11-18T21:13:21.933 回答
5

这个逻辑将至少改变宽度和高度：

#twitter-widget-0, #twitter-widget-1 {
  float: none; 
  width: 100% !important;  
  height: 250px !important;
}

缩短高度的唯一问题是它隐藏了人们发送推文的文本框，但它确实缩短了高度。我的猜测是，如果你想添加其他 CSS 样式，你可以放 !important 子句。我还假设如果您有三个小部件，您将定义 #twitter-widget-2 等。

于 2013-02-22T15:39:51.727 回答
5

感谢你们所有人，我找到了自己的方式：几乎就像缺乏所说的那样，但我们不得不专注于 iframe：

.MyClassForTheDivThatContainTheiFrame iframe{
    width:100%;
}

当然 .MyClassForTheDivThatContainTheiFrame 也具有 % 宽度

于 2013-01-15T11:39:52.570 回答
1

这是一个有用的线程，谢谢。我正在开发一个使用较旧的 Twitter 个人资料小部件的网站，我发现它更易于定制。因此，另一种方法是使用它来显示提要（定制以适应）：

<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。

希望对某人有所帮助！

于 2013-01-22T11:59:00.493 回答
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>
于 2012-09-25T22:42:02.743 回答
0

如果你绝对必须做一个流体，你可以编写一个 javascript，在调整大小事件或使用一些 javascript 计时器后更改 iframe 的宽度。

我们可以看看你的一些代码来为此制作一些js代码吗？

于 2012-09-25T14:25:24.417 回答
0

属性选择器应该可以工作：

iframe[id*="twitter-widget"] {
  width: 100%;
}

更多在这里。

于 2015-03-29T17:28:15.643 回答
0

这是不可能的。您可以使用锚选项卡中的 html 宽度和高度来设置精确的宽度和高度。除此之外，你运气不好。没有响应或流畅的能力。

它还具有 220 像素的最小宽度和 520 像素的最大宽度。

<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>
于 2012-09-12T01:09:52.517 回答
0

你可以给你的 iframe 一个类，并尝试将 CSS 应用到它。至少将宽度更改为 %。

于 2012-09-09T23:42:54.773 回答