Javascript 向下填充div，同时使用bootstrap保持等长

目前，我有一个列表，我使用ng repeat填充，并使用宽度为6的列。但是，我遍历的数据是按字母顺序排序的，我希望列表按字母顺序向下填充，同时仍然保持两列均匀堆叠的美观。这是否可以在不进行数据预处理的情况下使用引导实现

例如，在上面的示例中，它是按字母顺序从左到右和从上到下排列的。我希望它是按字母顺序向下的，第二列从第一列继续到最后一半的数据

下面是一些简化的代码：

{{topLayerObject.name}
{{questionObj.name}

重复列表两次，但使用

limito

限制每个列表中显示的项目。使用HTML/CSS并排创建列表。我在下面的代码段中使用了两个引导列

您可以使用

Math.ceil（items.length/2）如果项目数为偶数，它将平均分割，否则它将向上取整，因此左侧列表中还有1个项目

第1栏：


第二列（负
limito
将从列表末尾开始）：



var-app=angular.module（“app”，[]）；
应用控制器（“控制器”，功能（$scope）{
$scope.objectArray=[{
名称：“单数项”，
项目：[“A”、“B”、“C”、“D”、“E”、“F”、“G”、“H”、“I”]
},
{
名称：“偶数项”，
项目：[“A”、“B”、“C”、“D”、“E”、“F”]
}
];
//计算将列表拆分为2的位置。如果您知道列表的长度不会改变，我会将其更改为变量，而不是每个摘要周期调用函数两次
$scope.getBreakPoint=函数（项）{
return Math.ceil（items.length/2）；//如果项目数为奇数，则此值将向上取整
};
});

{{topLayerObject.name}
{{item}}
{{item}}
不幸的是，所有内容都在同一个数组中，并且这些项目既没有彼此分离，也没有父项分离。这就是为什么垂直总体对我如此有吸引力的原因——我必须添加额外的数据结构或多次循环数据，以处理这些嵌套列，只是为了对它们进行计数。是否有某种flexbox可以使项目保持在一个均匀的水平，但可以根据需要垂直拉伸？@user1066886如果您想要一个仅CSS的解决方案，请看另一个问题。似乎它使用了固定的with列。我正在寻找一种更具响应性和数据驱动性的方法，来处理上述各种输入数字的数据example@user1066886这些柱子不是固定的。尝试删除除列计数属性之外的所有CSS。这似乎工作得非常好，但似乎不适用于引导。这是有问题的，因为如果显示太小，复选框占用整行是有益的。在某些显示器中，单词被剪裁，无法完全显示。你有什么建议吗？一个混乱的解决方法是使包含列计数的列容器成为基于大小的条件容器，并类似地为子对象提供条件类，但这似乎不太理想。如果您编辑您的原始答复，我将接受它作为答案。