twitter-bootstrap - Angularjs 和 twitter bootstrap - 每行创建 X 个项目

Question

我正在使用 angular.js 和 twitter bootstrap 来创建网络应用程序的客户端。

我想知道，做这样的事情的正确方法是什么

现在我正在做这样的事情

<div class="span9">
    <div class="row">
        <div class="span3" ng-repeat="set in selectedCollection.sets">
            {{set.name}}</div>
    </div>
</div>

使用这段代码，即使我有 4 个元素，我也会得到 2 行，第一行有 3 个元素，第二行有一个元素。如果此解决方案有效(目前)，我想知道这一点:

To nest your content with the default grid, add a new .row and set of .span* columns within an existing .span* column. Nested rows should include a set of columns that add up to the number of columns of its parent.

这部分来自官方的bootstrap文档。

如果这是做这种事情的不当方式，那怎么实现呢？我是否应该以某种方式将这些数据拆分为二维数组并创建两个嵌套循环，以便每行都有 3 个 span3 div？

如果是这种情况，我会在模型中创建一个函数，该函数会根据一维数组返回这个二维数组，并在我的代码中使用 ng-repeat="dimensionalSet in mappingFunction()"外部元素。

Answer 1

其实我也在想这种情况。我不认为你的 fiddle 是错的。如果那些嵌套的行列加起来不等于父列数，这应该不是问题。

您可以做的一件事是对对象集合执行 ng-repeat，其中每个对象包含一个包含三个对象的数组，然后始终添加这三个对象，即使其中一些对象为空。如果您从服务调用中获取结果，则可以在发送回结果之前在服务器端执行此操作。