一个div类型的元素,它不影响用JS插入元素的布局

我正在用Twitter引导我的网格系统。我有一个JS脚本,它从XML文件中获取项目列表。我从这个文件中得到的每一项都应该用它自己的列插入到网格中。为了更容易地将这些项插入到DOM中,我使用了一个名为news results的div,每次脚本循环遍历XML中的下一项时都将其追加。

<div class="container">
  <div class="row">
    <h1>Recent News</h1>
    <div id="news-results">
        <div class="col-lg-4 col-md-6 col-sm-12 col-12">
            <div class="card">
                <div class="card-body">
                    <h3>{news_title}</h3>
                    <p>{news_body}</p>
                    <div class="card-footer text-muted">
                        <div class="card-link">
                            <h6>Posted on {news_date}</h6>
                        </div>
                        <div class="card-link">
                            <a href="{news_link}" class="btn btn-primary">Read More</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
  </div>
</div>

问题是新闻结果div似乎影响了网格的布局。这些细胞堆叠在一起,而不是按它们应该的方式。如果我只复制新插入的新闻项的HTML,并将其插入到没有news results div的页面中,则效果很好。

有没有一个元素我可以用来很容易地识别脚本中的哪些元素应该插入页面?

这里是一个JS小提琴演示。如果你去掉新闻结果标签,你就会明白我的意思。