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小提琴来演示。如果您删除了新闻结果标签，您将明白我的意思。

Answer 1

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

#news-results {
  display: contents;
}

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

不会影响使用JS插入元素的布局的div类型元素

1 个答案: