Html FireFox中的CSS列中断

我正试图找出一种跨浏览器的方法来实现无序列表的列式布局。标记来自CMS，因此除了添加类之外，我无法修改输出。我可以让这些列工作，但我还需要指定列分隔符，因为这些列并不总是相等的。标记看起来像：

ul{
列表样式：无；
}
.c3{
-moz列数：3；
-webkit列数：3；
列数：3；
}
colBreak先生{
-moz列之前中断：始终；
-webkit列之前中断：始终；
断列前：始终；
字体大小：粗体；
}

项目1
项目2
项目3
项目4
项目5
项目6
项目7
项目8
项目9
项目10
项目11
项目12
项目13
项目14

我能够让它与输出、附加类和一些jQuery一起工作。我没有指明colbreak在哪里，而是为每个导航项分配了一个column类

<ul class='c3'>
  <li class='col1'>Item1</li>
  <li class='col1'>Item2</li>
  <li class='col2'>Item3</li>
  <li class='col2'>Item4</li>
  <li class='col2'>Item5</li>
  <li class='col2'>Item6</li>
  <li class='col2'>Item7</li>
  <li class='col2'>Item8</li>
  <li class='col2'>Item9</li>
  <li class='col2'>Item10</li>
  <li class='col3'>Item11</li>
  <li class='col3'>Item12</li>
  <li class='col3'>Item13</li>
  <li class='col3'>Item14</li>
</ul>

项目1
项目2
第3项
项目4
项目5
第6项
第7项
项目8
第9项
第10项
项目11
第12项
第13项
项目14

然后，使用jQuery wrapAll方法，我能够添加引导类以将其拆分为列：

$(".c3 .col1").wrapAll("<div class='col-sm-4' />");
$(".c3 .col2").wrapAll("<div class='col-sm-4' />");
$(".c3 .col3").wrapAll("<div class='col-sm-4' />");

$（.c3.col1”）.wrapAll（“”）；
$（“.c3.col2”）.wrapAll（“”）；
$（“.c3.col3”）.wrapAll（“”）；

这将所有

.col1

项分组到一个

中，并在不使用间隔符的情况下获得中断

---

如果有人有更好的方法来实现这一点，我很乐意看到它。但是，这对这个特定的问题是有效的。

请参阅：@GCyrillus，这确实指出了问题所在，但我仍然没有可行的替代方案。目前firefox没有。您将需要一些复杂的Javascript来插入空容器，以填充列的底部，然后您希望看到的元素位于下一列的顶部，将其拆分为许多ul或非ul….：（一个flex替代方案，边距底部增加了一些元素，因此高度应该是固定的，列计数/填充版本不知道如何通过js进行排序，手动是很容易的