Javascript 如果元素数量超过X，CSS/html显示列表将分为两列？

我有一个动态的元素列表。 我不希望这份清单太长。 我可以使用：

ul {
    columns: 2;
    -webkit-columns: 2;
    -moz-columns: 2;
}

但这总是导致两列。如果列表中只有几个元素，我希望只有一列。 因此，对于5个元素或更少的元素，我希望： 1 2 3 4 5 1. 2. 3. 4. 5. 但如果有6个或更多元素，我希望： 1 4 2 5 3 6 1 4 2 5 3 6 我使用css3、html、bootstrap 2.3.2和jquery

---

有没有人能提供一些最佳方法的建议？

您可以简单地筛选

ul

元素：

$（'ul'）.filter（函数（）{
返回this.childNodes.length>5
}).addClass（“两列”）
ul.two列{
列表样式：无；
栏目：2个；
-webkit栏目：2个；
-moz列：2个；
}


一,
二,
三,
四,
五,
六,
以下是一个仅限于CSS的解决方案：

本文深入解释了如何完成您想要构建的内容

编辑：示例！
因此，我们的想法是在ul中的第6个列表项之后设计不同的lis–否则，就是：当有5个以上的元素时，我们想要更改布局。可能的CSS唯一解决方案：

ul li {
  color: blue;
}

ul li:nth-child(n+6) { /* targeting all elements form the 6th on */
  color: red;
}

当然，这是假设最多有12个项目，因为否则整个概念就会崩溃，或者最终有6个项目是蓝色的，n个元素是红色的。
无论如何，这肯定会奏效，并且是对老年退休金问题的回答（也许不是答案）

Edit2：在OPs的特定情况下，示例：

ul li {
  float: left; /* list items float left */
  width: 50%;
}

ul li:nth-child(n+4) {
  float: right; /* from the fourth list item on they float right */
}

jQuery方法
此方法使用jQuery计算有多少个元素，并根据其是否为6个或更多元素添加一个类


$（文档）.ready（函数（）{
$（'ul'）。每个（函数（）{
if（$（this.children（）.length>5）{
$（this.addClass（'column'）；
}
});
});
ul.column{
栏目：2个；
-webkit栏目：2个；
-moz列：2个；
}


一,
二,
三,
四,
五,


一,
二,
三,
四,
五,
六,
如果您能够使用CSS网格，则可以使用和指令来完成此操作。网格可以在大多数浏览器中本机使用，也可以在IE11中使用：


.list{
显示：网格；
网格模板行：重复（5，最小内容）；
网格自动流：列；
}

1
2
3
4
5
6
7
没有详细检查它，但您如何使用它将样式应用于父级？（据说，这似乎真的让人发问）。我想，您可以尝试复制UL列样式化LIs，但这会改变LI元素的预期顺序，为什么要对父元素进行样式化？从一开始就数李，到6点，你可以进行某种布局切换。例如，如果有超过5个lis，则使用flexbox或。。。不知道，但我可以想出几种方法来解决这个问题使用两个列的顺序是从左到右然后向下：
1 4 2 5 3 6
在设计LIs样式时，应该是：
1 2 3 4 5 6
现在取决于顺序是否重要，关于OP预期行为。如果您能提供一个与使用两列相同顺序的工作示例，我将非常高兴：）我想您可以向左浮动任何LI<4，向右浮动其他LI，但您的答案中的具体示例将非常棒
return$（this）。children（“LI”）。为meThis工作的长度将项目拆分为5列，这可能会导致三列或更多列。有没有办法限制列的数量？例如，对于少于6个项目显示一列，对于6个或更多项目显示两列（从不显示三列）。