html - JS插入元素不影响布局的div类型元素

Question

我正在为我的网格系统使用 Twitter Bootstrap。我有一个 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 并将其插入到没有新闻结果 div 的页面中，它可以正常工作。

是否有一个元素可以让脚本轻松识别应该在页面中插入元素的位置？

这里有一个 JS fiddle 来演示。如果您删除 news-results 标签，您就会明白我的意思。

Answer 1

我找到了适合我的解决方案。

#news-results {
  display: contents;
}

它基本上使 div 严格充当内容 HTML 的占位符。