使用Angular JS进行Bootstrap网格对齐

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- *设置什么值？

2. 另外，如果我有一个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问题以了解详细信息， twitter引导程序中有五个相等的列

对于第二部分，我可以尝试这样的操作：

 <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))
        }
    });

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

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

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

Answer 2

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