javascript - Bootstrap 网格对齐与 Angular JS

Question

我一直在尝试使用 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-* 设置什么值？

1. 此外，如果我有一个 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 并相应地分离列？我真的希望我的问题很清楚。请帮忙。

Answer 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 类中。过滤器看起来像这样 -

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

fiddle - http://jsfiddle.net/780gku24/

但请务必注意 - 这是假设您在 JSON 中的元素不会超过 12 个。如果这对您不起作用，请给我留言!

您可以向数据中添加或删除元素以查看其运行情况。