如何在全宽屏幕中显示 Twitter 小部件

Question

我正在使用 bootstrap 流体容器布局来显示我网站的全宽内容。

我想以全宽显示我的 Twitter 小部件块，但如果我尝试使用 css 或 jQuery 使其全宽，则它不起作用。

我使用以下 css 使小部件 100%，但它不工作。

  .timeline-Widget {
        background-color: #fff;
        border-radius: 4px;
        max-width: none !important;
        width: 100%;
    }

这是 Twitter 小部件的屏幕截图。

我想让它全宽。

请为全宽 Twitter 小部件提供合适的解决方案。

Answer 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>'));
    })
});

也请参考 link。他们有其他可能有效的解决方案。

如何在全宽屏幕中显示 Twitter 小部件

How to display twitter widget in full width screen

html

iframe

fluid-layout

twitter-bootstrap-3

twitter-widget