使用引导网格和 ng-repeat 元素居中并填充页面答案

【问题标题】：Centering and filling the page with bootstrap grid and ng-repeat elements使用引导网格和 ng-repeat 元素居中并填充页面
【发布时间】：2016-01-04 10:04:52
【问题描述】：

我想在页面上显示几个元素，我正在使用 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 时将元素居中并将它们均匀地分布在页面上？谢谢！

【问题讨论】：

如果您向我们提供代码版本（作为问题中的最低限度）或作为链接或小提琴附加，也会有所帮助。
对每列的内容使用居中 css

标签： html css angularjs twitter-bootstrap

【解决方案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>

【讨论】：

【解决方案2】：

一个简单的引导辅助类 text-center 应该为您完成大部分工作

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

另外可以给<a>标签添加类和：

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

【讨论】：