css - 能够显示一个没有确定列数的元素列表

Question

我想在列中列出元素，以便当列表元素达到最大值时。高度然后自动移动到下一列

我有一行两列

<div class="row">
<div class="col-md-3">
</div>
<div class="col-md-9">
 // -- <li item
</div>

我想在一列中列出元素 1、2、3，然后它移到列中。但是，我不能对列数进行硬编码，因为第 5 项需要更多空间是动态的，然后第 6 项将进入下一列。

Item 1     Item4   Item6
Item 2     Item5   Item7
Item 3     

Answer 1

您可以使用名为 column-count 的 CSS3 功能。检查此代码和片段:

.three-col-list {
  -webkit-column-count: 3;
  -moz-column-count: 3;
  column-count: 3;
  height: 250px;
}

.three-col-list li {
  display: block;
  padding: 0 10px 60px;
}

<ul class="three-col-list">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
  <li>Item 6</li>
  <li>Item 7</li>
  <li>Item 8</li>
  <li>Item 9</li>
</ul>

虽然这不使用 Bootstrap 列类，但我相信您可以使用自定义类和 Bootstrap 使用的一些填充来设置样式。请注意，IE9 或更早版本不支持此功能。