需要使用Bootstrap和Angular 2创建2列

我正在构建一个使用Bootstrap的Angular 4应用程序，并且我偶然发现了一个问题。我需要显示一个元素列表，列表的长度取决于当前用户的可变长度，我需要在2列上显示数据。我的第一个方法是这样的：需要使用Bootstrap和Angular 2创建2列

<div class="container"> 
    <div class="row"> 
     <div class="col-sm-12"> 
      <div class="row"> 
       <div class="col-sm-5 col-md-5" *ngFor="let el of elements"> 
        <app-single-element [el]="el"></app-single-element> 
       </div> 
      </div> 
     </div> 
    </div> 
</div>

现在，这个工程的一小数量的元素，如4-5，但如果我有一个较大的阵列，50例如，有时会出现一个缺口第一列。我怀疑这是因为我应该为每个2个元素设置一个“行”div，但是我无法找到一种方法来编写ngFor来适应这个问题。 应用程序单个元素组件没有css，它现在只是文本。

增加了一些CSS的元素，这里是截图它现在的样子：screenshot

谢谢！每次

来源

2017-09-01 Cosmin Alexandru Simon

你可以分享一个抢劫犯吗？ – Atlas

你可以试试col - * - 6而不是5吗？而且，顺便说一句，你为什么把它放在另一行？只要把它保存在你的col-sm-12 div ... – Julo0sS

让我试一下col - * - 6 ..之前是col-sm-6，我在5之前就试着用这个问题。 –

采取新的行作为 DIV部分下可能会解决你的问题

或部分，其中u得到空白部分带他们到新的div行

来源

2017-09-02 04:20:45

使用ngFor动态生成页面。在每一行我需要有2个元素，所以这是我的问题：如何编写ngfor，以便在每2个元素之后，我可以添加另一行。 –

我试图创建一个Plunker为此，但如果我剥离所有CSS类的内容，它的工作原理。所以我想毕竟是在CSS中有一些东西。有人可以将此问题视为无效吗？

来源

2017-09-04 18:14:50

需要使用Bootstrap和Angular 2创建2列

回答

相关问题