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

Question

我正在使用bootstrap fluid container layout来显示我网站的全宽内容。

我想在全宽度中显示我的推特小部件块，但如果我尝试使用css或jQuery使其全宽，那么它无法正常工作。

我使用以下css使小部件100％但不起作用。

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

这是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。他们有其他可能有效的解决方案。