使用Javascript创建动态行/列结构

Question

我正在尝试将RSS Feed部分添加到我的网站。我希望每个故事都存储在宽度为3的Bootstrap列中。我试图在每个第4个元素的开头添加一行，然后在下一个第4个元素上关闭该行。但是目前我似乎遇到了问题，它过早地切断了行并破坏了格式化。

下面是我的JS和我的问题的截图。

var rssfeed = new google.feeds.Feed("http://www.residentadvisor.net/xml/rss_news.xml");
//rssfeed.setResultFormat(google.feeds.Feed.XML_FORMAT);
rssfeed.setNumEntries(10);
rssfeed.load(showEntries);

console.log(rssfeed);

function showEntries(result) 
{
    if (!result.error)
    {
        var feeds = result.feed.entries;
        console.log(feeds);
        var rssoutput = "";
        for (var i=0; i<feeds.length; i++) 
        {
            if (i%4 == 0) {
                rssoutput += '<div class="row">';
            }
            rssoutput += '<div class="col-md-3">';
            rssoutput += '<h3><a href="' + feeds[i].link + '">' + feeds[i].title + '</a></h3><br />';
            rssoutput += '<p>' + feeds[i].content + '</p><br/>';
            rssoutput += '<i><p>' + feeds[i].publishedDate + '</p></i><br />';
            rssoutput += '</div>';

            if (i != 0 && i%3 == 0) {
                rssoutput += '</div>';
            }
        }

    document.getElementById("latest-news").innerHTML = rssoutput;
    }
}

Answer 1

为什么每行需要四个？

因为bootstrap是响应式的，所以你应该能够将所有的rss feed放在同一行，并且bootstrap会适应。

rssoutput = '<div class="row">';
for (var i=0; i<feeds.length; i++)
{
  rssoutput += '<div class="col-md-3">';
  rssoutput += '<h3><a href="' + feeds[i].link + '">' + feeds[i].title + '</a></h3><br />';
  rssoutput += '<p>' + feeds[i].content + '</p><br/>';
  rssoutput += '<i><p>' + feeds[i].publishedDate + '</p></i><br />';
  rssoutput += '</div>';
}
rssoutput += '</div>';

您还可以在课程中添加col-xs-6和col-sm-4以占用较小的显示。

rssoutput += '<div class="col-xs-6 col-sm-4 col-md-3">';

但这完全取决于你。