html - 如何在全宽屏幕中显示 twitter 小部件

Question

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

我想以全宽显示我的 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>'));
    })
});

也请参考链接。他们还有其他可行的解决方案。