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个coloumns中将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并相应地隔离列？我真的希望我的问题清楚。请帮忙。

Answer 1

关于你的第一个问题，有一些解决方案 - 详情请查看这个问题，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))
        }
    });

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

重要的是要注意 - 这是假设您在JSON中不会有超过12个项目。如果这不适合你，请留下评论！

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

Answer 2

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

与Angular JS的Bootstrap网格对齐

2 个答案: