Javascript 角材料：Md卡段落中断ng重复

我是根据angular Material网站的示例构建的，但添加了一个ng repeat，列表很好且响应迅速：

显示了6个对象，因为后端服务器中有6个

如果我调整大小，而不是通过一条线，它会使它变窄，这不是一件坏事：

如果我调整为5英寸手机格式，也可以：

现在，我从我的服务器后端得到20个对象，每个6个对象的材质不会自动通过一行，它不会正确显示

所以，我试过这段代码，但不起作用，ng if起作用，但没有通过一行：

<md-content class="md-padding" layout-xs="column" layout="row">
                                  <div  flex-xs flex-gt-xs="50" layout="column" class="flex" ng-repeat="j in juristes" ng-click="editerJuriste(j)" style="cursor:pointer">
                                    <md-card    ng-class="{yellow : j == selectedObject}" ng-click="selectItem(j); selectedIndex = 1;" class="md-card" style="cursor:pointer">
                                        <img ng-src="{{imagePath}}" class="md-card-image" alt="Washed Out"/>
                                        <md-card-title>
                                            <md-card-title-text>
                                            <span class="md-headline">{{ j.text }}</span>
                                            <span class="md-subhead">{{ j.ville }}</span>
                                            </md-card-title-text>
                                        </md-card-title>

                                        <md-card-content>
                                            <p>It is a <a href="#">long established fact</a> that a reader will be distracted by the readable content of a page when looking at its layout.</p>
                                            <h4>More Ipsums</h4>
                                            <p>The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.</p>
                                        </md-card-content>

                                        <md-card-actions layout="row" layout-align="end center">
                                          <md-button class="md-icon-button" aria-label="Favorite">
                                            <md-icon md-svg-icon="img/icons/favorite.svg"></md-icon>
                                          </md-button>
                                          <md-button class="md-icon-button" aria-label="Settings">
                                            <md-icon md-svg-icon="img/icons/menu.svg"></md-icon>
                                          </md-button>
                                          <md-button class="md-icon-button" aria-label="Share">
                                            <md-icon md-svg-icon="img/icons/share-arrow.svg"></md-icon>
                                          </md-button>
                                        </md-card-actions>

                                    </md-card>

                                    <div  ng-if="($index + 1) % 3 == 0">test<div class='md-padding' layout="row" layout-wrap></div><br></div>
                                  </div>
                            </md-content>

{{j.text}}
{{j.ville}}
读者在查看页面布局时，可能会被页面的可读内容分散注意力

更多Ipsums
使用Lorem Ipsum的意义在于，它的字母分布或多或少是正态的，而不是使用“此处内容，此处内容”，使其看起来像可读的英语

测试

是否有任何方法可以保持CSS行为，并在6个对象中的每一个对象中插入段落分隔符

如果您知道这个问题，非常感谢。我已经尝试了一些有关StackOverflow的解决方案，但效果并不理想

编辑：只是让你看到它是如何不能被使用的：我添加了一些对象：

---

Bootstrap会自动执行此操作，但我真的不明白如何使用材质在对象之间断开一段，请帮助。

您可以通过将卡包装成a来解决md卡包装问题。使用所需的flex值重复该块（对于5行，即flex=“20”）。注意：它不会自动调整卡片的高度。从代码笔URL编辑：

angular.module（'MyApp'）
.controller（'AppCtrl'，函数（$scope）{
$scope.users=[‘法比奥’、‘莱昂纳多’、‘托马斯’、‘加布里埃尔’、‘法布里齐奥’、‘约翰’、‘路易斯’、‘凯特’、‘马克斯’]；
})；

.gridListdemoBasicUsage md网格列表{
利润率：8px；
}
.gridListdemoBasicUsage.gray{
背景:#f5；
}
.gridListdemoBasicUsage md网格磁贴{
过渡：所有400ms缓解为50ms；
}

用户列表
{{user}}
知识产权是一种权利，是一种权利，是一种权利，是一种权利

拯救
看法
angular.module（'MyApp'）
.controller（'AppCtrl'，函数（$scope）{
$scope.users=[‘法比奥’、‘莱昂纳多’、‘托马斯’、‘加布里埃尔’、‘法布里齐奥’、‘约翰’、‘路易斯’、‘凯特’、‘马克斯’]；
});
//#sourceURL=pen.js

你可以给你正在重复的每个div分配16.666%的宽度，而父div的宽度为100%。谢谢你，但它没有越界，请转到第二段。你是否尝试过ng if=“”！（$index%3）”？谢谢，NG-IF工作正常，在3次迭代中每次都显示一些内容，但它不想通过一行（打断段落）无论是使用
还是我尝试过的任何东西。使用bootstrap，它可能都可以正常工作。我真的不知道该怎么做，就像Material不知道一行上有太多对象一样。解决了我使用此plunker的问题：