使用引导网格和ng-repeat元素对页面进行居中和填充

Question

我想在页面上显示几个元素，而我正在使用Angular＆＃39; 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>

Answer 2

一个简单的bootstrap助手类text-center应该为你做大部分工作

<div ng-repeat="org in orgs" class="col-md-4 text-center">

此外，可以为<a>标记添加类，并且：

a.content-class{display:block; text-align:center}