javascript - 绑定(bind)列表的 css column-count 属性以响应地 Bootstrap 网格类

Question

我正在使用 bootstrap，我有一个包含约 1000 个元素的列表。 数据是通过单个查询从数据库中获取的。 我想通过三种方式调整带有 css column-count 属性的列表显示，即通过 Bootstrap 网格类 col-xs、col-sm 和 col-md。

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
  <li>Item 6</li>
</ul>

当浏览器符合 col-md 规范时，column-count 应设置为 3。(因此列表在大屏幕上显示为 3 列。)

Item 1  | Item 3  | Item 5
Item 2  | Item 4  | Item 6

当浏览器符合 col-sm 规范时，column-count 应设置为 2。(因此列表在例如平板电脑屏幕上以 2 列显示。)

Item 1  | Item 4 
Item 2  | Item 5
Item 3  | Item 6 

当浏览器符合 col-xs 规范时，column-count 应设置为 1。(因此列表在小屏幕上显示为 1 列。)

Item 1 
Item 2  
Item 3
Item 4
Item 5
Item 6

问题:如何将 css column-count 属性绑定(bind)到 bootstrap 网格类？

预先感谢您的帮助!

手袋

Answer 1

这行得通:

ul {
    height: auto;
    width:100%;
}
ul li {
    display: block;
    padding: 20px;
}

@media(min-width: 480px){
  ul{
      -webkit-column-count: 1;
      -moz-column-count: 1;
      column-count: 1;
    }
}

@media(min-width: 768px){
  ul{
      -webkit-column-count: 2;
      -moz-column-count: 2;
      column-count: 2;
    }
}

@media(min-width: 992px){
  ul{
      -webkit-column-count: 3;
      -moz-column-count: 3;
      column-count: 3;
    }
}
div{width:900px;overflow:hidden;}

<div>
	<ul>
	  <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>
	  <li>Item 10</li>
	  <li>Item 11</li>
	  <li>Item 12</li>
	  <li>Item 13</li>
	  <li>Item 14</li>
	  <li>Item 15</li>
	</ul>
</div>

以全页模式查看