Question

我使用bootstrap，我有一个包含~1000项的列表。使用单个查询从数据库中提取数据。我希望以三种方式使用css column-count属性调整列表的显示，即通过引导网格类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规范时，列数应设置为3.（因此列表在大屏幕上显示3列。）

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

当浏览器符合col-sm规范时，列数应设置为2.（因此列表显示为2列，例如平板电脑屏幕。）

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

当浏览器符合col-xs规范时，列数应设置为1.（因此列表在小屏幕上显示为1列。）

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

问题：如何将css column-count属性绑定到bootstrap网格类？

提前感谢您的帮助！

莫夫

Answer 1

这有效：

＆＃13;

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;}

＆＃13;

<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>

＆＃13;

以fullPage模式查看

Answer 2

这就是你想要的，快乐编码！

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Bootstrap</title>
  <style>
    body{
      padding: 10px;
    }
  </style>
</head>
<body>
  <div class="row">
<ul class="list-group">
  <li class="col-xs-12 col-sm-6 col-md-4 list-group-item">First item</li>
  <li class="col-xs-12 col-sm-6 col-md-4 list-group-item">Second item</li>
  <li class="col-xs-12 col-sm-6 col-md-4 list-group-item">Third item</li>
  <li class="col-xs-12 col-sm-6 col-md-4 list-group-item">fourth item</li>
  <li class="col-xs-12 col-sm-6 col-md-4 list-group-item">fifth item</li>
  <li class="col-xs-12 col-sm-6 col-md-4 list-group-item">sixth item</li>
</ul>
  </div>
</body>
</html>

你想要的结果

将列表的css列数计数属性绑定到响应式引导网格类

2 个答案: