带引导程序的可变多列有序列表

Question

我想在更多列上创建一个列表。列数应根据窗口大小而变化。 我可以存档这个只是设置col- - 类，如下所示：

<ol>
    <li class="col-md-3 col-sm-4" data-ng-repeat="searchBoxItem in destinations">
        {{searchBoxItem.name}}
    <li>
</ol>

（angularjs仅用于重复元素，并解释它们可能会改变数量）

结果非常好：

当我在垫上时，就像这样：

关键是元素的排序水平增加。我希望将它们垂直排序。

我无法想象在CSS3中使用它的方法，甚至可以使用干净的解决方案，而不涉及js。

可能，我想拥有ie8兼容性：）

Answer 1

您希望通过CSS3 Multi-Column Layout和column-count的组合使用column-width。为了使这项工作（并且由于列是可变的，取决于设备宽度），您将需要在列表中添加其他类，以定义桌面和移动的列状态。

这将确保事物垂直排序，其方式与为打印版面定义页面列的方式类似（例如，报纸）。

This guide on CSS Tricks概述了自适应CSS列。

例如，在您的情况下，您可以使用以下内容：

ol li {
  -webkit-columns: 4 100px;
     -moz-columns: 4 100px;
          columns: 4 100px;
}

这基本上说，“我想要最多4列，最小宽度为100px。如果在缩放期间宽度变得太窄......减少列数。”但是我建议在这个区域添加一个类或ID，以便你可以专门定位它。