使用 Angular JS 进行引导网格对齐答案

【问题标题】：Bootstrap grid alignment with Angular JS使用 Angular JS 进行引导网格对齐
【发布时间】：2015-11-11 03:40:54
【问题描述】：

我一直在尝试使用 Bootstrap 框架。

1.在网格对齐中，当我们有 4 列要使用时，我们根据 w3 学校使用下面的行

<div class="row">
      <div class="col-lg-3">
      </div>
      <div class="col-lg-3">
      </div>
      <div class="col-lg-3">
       </div>
      <div class="col-lg-3">
      </div>
    </div>

或者两列我们用 col-lg-6 和 col-lg-6 划分相同的列。如果我有 5 列要对齐怎么办？我应该在 3 列中为 col-lg-* 设置什么值？

另外，如果我有一个 json 文件，我从中获取数据并创建列运行时，该怎么办？我如何在这里处理这种情况？例如，我使用 Angular js 获取数据并生成一些列表，如下例所示，

    <section class="row">


        <ul>

            <li class="col-lg-6">

                <img class="profile-image img-circle av" width="70%" src="images/Crack.png" />
                <p>Some text</p>

            </li>

            <li class="col-lg-6">

                <img class="profile-image img-circle av" width="70%" src="images/Aad.png" />
               <p>Some text</p>

            </li>

            <li class="col-lg-6">

                <img class="profile-image img-circle av" width="70%" src="images/Aa.png" />
                <p>Some text</p>

            </li>


        </ul>


    </section>

您认为我可以如何使用 ng-repeat 并相应地分隔列？我真的希望我的问题很清楚。请帮忙。

【问题讨论】：

对于第一部分 - 要获得 3 列，您只需使用 col-lg-4 - 这是一个 12 col 系统，因此 12/4 = 3。对于第二部分 - 你是说你不这样做吗？在获得 JSON 之前不知道您有多少列？ JSON 是什么样的？您是在问如何从 JSON 中放入数据，或者如何根据 JSON 中有多少项目来拆分列？不是很清楚。
抱歉不清楚。现在编辑我的问题。对于第一部分，我想知道如何实际处理不相等的列数量？第二部分，是的，如何拆分列，以便根据 JSON 中有多少项目进行相应的隔离？
在下面的答案中更新了这一切。希望这对你有用:)。

标签： javascript html css angularjs twitter-bootstrap

【解决方案1】：

至于您的第一个问题，有一些解决方案 - 请查看此 SO 问题以了解详细信息，Five equal columns in twitter bootstrap

对于第二部分，我可能会尝试这样的事情：

 <div class="row" ng-repeat="item in placeholders">
    <div ng-class="col-md-{{12 / placeholders.length | parseInt}}">col-md- {{12 / placeholders.length | parseInt}}</div>
 </div>

占位符是 JSON - 所以它只是查看长度，然后在其上运行一个简单的 parseInt 过滤器。这一切都发生在 ng-class 中。过滤器看起来像这样 -

  myApp.filter('parseInt', function () {
        return function (a, b) {
            return (parseInt(a))
        }
    });

小提琴 - http://jsfiddle.net/780gku24/

需要注意的是 - 这是假设您在 JSON 中的项目不会超过 12 个。如果这对您不起作用，请给我留言！

您可以在数据中添加或删除项目以查看它的实际效果。

【讨论】：

【解决方案2】：

请尝试 col-lg-4。它会平均划分列。

【讨论】：