CSS3列没有显示在IPad和IPhone上

我使用CSS3列，比如

.Content {
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
    column-break-inside: avoid;
    -webkit-transition: all .2s ease;
    -moz-transition: all .2s ease;
    -o-transition: all .2s ease;
    transition: all .2s ease;
}
.List {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
    -webkit-column-gap: 0px;
    -moz-column-gap: 0px;
    column-gap: 0px;
    display: block !important;
}

我的html是这样的

<div class="col-lg-12 col-md-12 col-xs-12 col-sm-12 List">
  <div class="Content col-lg-12 col-md-12 col-sm-12 col-xs-12">
     My content
  </div>
</div>

我的内容

---

我用Chrome开发工具检查了我的iPad和iPhone diplay，它工作正常。然而，真正的iPad和iPhone并没有显示任何东西。如何解决此问题？

使用前缀

-webkit-

的非完全支持浏览器缺少一些无法使用的元素

Webkit浏览器对非标准的

-Webkit column break-*

属性具有同等的支持，以实现相同的结果（但仅支持

自动

和

始终

值）。Firefox不支持

break-*

这几乎说明webkit浏览器（如iPhone或iPad上的浏览器）甚至不部分支持

分栏

，因此您需要找到替代方法，例如使用JavaScript或在CSS中使用回退

Columnizer是一个很好的jQuery插件，它使用JavaScript创建相同的效果

---

经过长途旅行，我找到了解决这个问题的办法。

---

我想要实现的是使我的卡片看起来像pinterest。我用过。

谢谢你的回答。但我有一个问题。我下载该插件并将其应用到我的div中，比如

$（'.List'）.columnize（{columns:3}）。你说的都是对的。然而，很难处理断点。我想让我的div看起来像pinterest。有什么建议吗？非常感谢。