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

Bind css column-count property for lists to bootstrap grid classes responsively

本文关键字：绑定 网格 css 列表 属性      更新时间：2023-11-06

我正在使用引导程序，我有一个大约有1000个项目的列表。数据是通过一个查询从数据库中提取的。我想通过三种方式调整带有css列计数属性的列表显示，即通过引导程序网格类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>

当浏览器符合colmd规范时，列数应设置为3。（因此列表在大屏幕上显示为3列。）

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

当浏览器符合colsm规范时，列数应设置为2。（因此，列表在平板电脑屏幕上显示为2列。）

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

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

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

问题：如何将css列计数属性绑定到引导程序网格类？

提前感谢您的帮助！

Muff

这很有效：

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>

在全屏模式下查看

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

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

正是你想要的结果

相关文章：