html - 使用 bootstrap 网格和 ng-repeat 元素居中并填充页面

Question

我有几个要在页面上显示的元素，我正在使用 Angular 的 ng-repeat 来实现。我想通过一个 3x3 的列来显示它，所以我使用的是 Bootstrap 的 col-md-4。我的 HTML 如下:

<div ng-controller="resourcesController">
    <div class="main-body">
        <div class="container-fluid">
            <div class="resources">
                <div ng-repeat="org in orgs" class="col-md-4">
                    <a href={{org.url}} target="_blank"><img src={{org.icon}}></a>
                </div>
            </div>
        </div>  
    </div>
</div>

但是，元素显示如下:

如何在使用 ng-repeat 时将元素居中并将它们均匀分布在页面上？谢谢!

Answer 1

我的建议是仅使用一次 ng-repeat 是不够的。相反，您可以将 orgs 数组分成表示行列的数组。

然后你可以像下面这样修改代码(使你更容易应用你想要的网格格式):

  <div ng-repeat="orgRow in orgRows" class="rowClass">
  <div ng-repeat="orgElement in orgRow "class="columnClass" >
    <a href={{orgElement.url}} target="_blank"><img src={{org.icon}}></a>
  </div>          
  </div>