使用Bootstrap可以根据屏幕大小设置不同数量的<div>元素吗？
例如，桌面上每行4列。
+-----------+-----------+-----------+-----------+
| .col-md-3 | .col-md-3 | .col-md-3 | .col-md-3 |
+-----------+-----------+-----------+-----------+
| .col-md-3 | .col-md-3 | .col-md-3 | .col-md-3 |
+-----------+-----------+-----------+-----------+
然后，平板电脑和手机上的每列不会超过100％，平板电脑每行有3列。将列超过12列推到下一行，如下所示。
+-----------+-----------+-----------+
| .col-sm-4 | .col-sm-4 | .col-sm-4 |
+-----------+-----------+-----------+
| .col-sm-4 | .col-sm-4 | .col-sm-4 |
+-----------+-----------+-----------+
| .col-sm-4 | .col-sm-4 |
+-----------+-----------+
我找到了Bootstrap的responsive utilities，我可以隐藏或显示某些屏幕尺寸的列。这意味着我必须重复大量的列（参见下面的代码段），所以我希望有一个更清洁的解决方案。
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<section class="container">
<div class="row">
<div class="col-md-3 col-sm-4">
<p>1</p>
</div>
<div class="col-md-3 col-sm-4">
<p>2</p>
</div>
<div class="col-md-3 col-sm-4">
<p>3</p>
</div>
<div class="col-md-3 hidden-sm">
<p>4</p>
</div>
</div>
<div class="row">
<div class="hidden-md visible-sm-4">
<p>4</p>
</div>
<div class="col-md-3 col-sm-4">
<p>5</p>
</div>
<div class="col-md-3 col-sm-4">
<p>6</p>
</div>
<div class="col-md-3 hidden-sm">
<p>7</p>
</div>
<div class="col-md-3 hidden-sm">
<p>8</p>
</div>
</div>
<div class="row">
<div class="hidden-md visible-sm-4">
<p>7</p>
</div>
<div class="hidden-md visible-sm-4">
<p>8</p>
</div>
</div>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</body>
</html>
据我所知，你不能忽略包含.row div。能够只为所有元素添加class="col-md-3 col-sm-4 col-xs-6"并让引导程序占用多少<div>来添加最多12个将是很好的。所以4个在中型屏幕上，3个在小屏幕上，2个特别小。
答案 0 :(得分：3)
根据我在原始查询中的评论，这是对.row的误解。根据Bootstrap文档：
如果在一行中放置了超过12列，则每组都有 额外的列将作为一个单元包裹到一个新行上。
http://getbootstrap.com/css/#grid
您只需在布局中提供各种断点，然后让Bootstrap处理其余的断点：
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-xs-6 col-sm-4 col-lg-3">
<div class="well">1</div>
</div>
<div class="col-xs-6 col-sm-4 col-lg-3">
<div class="well">1</div>
</div>
<div class="col-xs-6 col-sm-4 col-lg-3">
<div class="well">1</div>
</div>
<div class="col-xs-6 col-sm-4 col-lg-3">
<div class="well">1</div>
</div>
<div class="col-xs-6 col-sm-4 col-lg-3">
<div class="well">1</div>
</div>
<div class="col-xs-6 col-sm-4 col-lg-3">
<div class="well">1</div>
</div>
<div class="col-xs-6 col-sm-4 col-lg-3">
<div class="well">1</div>
</div>
<div class="col-xs-6 col-sm-4 col-lg-3">
<div class="well">1</div>
</div>
<div class="col-xs-6 col-sm-4 col-lg-3">
<div class="well">1</div>
</div>
<div class="col-xs-6 col-sm-4 col-lg-3">
<div class="well">1</div>
</div>
<div class="col-xs-6 col-sm-4 col-lg-3">
<div class="well">1</div>
</div>
<div class="col-xs-6 col-sm-4 col-lg-3">
<div class="well">1</div>
</div>
<div class="col-xs-6 col-sm-4 col-lg-3">
<div class="well">1</div>
</div>
<div class="col-xs-6 col-sm-4 col-lg-3">
<div class="well">1</div>
</div>
<div class="col-xs-6 col-sm-4 col-lg-3">
<div class="well">1</div>
</div>
<div class="col-xs-6 col-sm-4 col-lg-3">
<div class="well">1</div>
</div>
<div class="col-xs-6 col-sm-4 col-lg-3">
<div class="well">1</div>
</div>
<div class="col-xs-6 col-sm-4 col-lg-3">
<div class="well">1</div>
</div>
<div class="col-xs-6 col-sm-4 col-lg-3">
<div class="well">1</div>
</div>
<div class="col-xs-6 col-sm-4 col-lg-3">
<div class="well">1</div>
</div>
<div class="col-xs-6 col-sm-4 col-lg-3">
<div class="well">1</div>
</div>
<div class="col-xs-6 col-sm-4 col-lg-3">
<div class="well">1</div>
</div>
<div class="col-xs-6 col-sm-4 col-lg-3">
<div class="well">1</div>
</div>
<div class="col-xs-6 col-sm-4 col-lg-3">
<div class="well">1</div>
</div>
<div class="col-xs-6 col-sm-4 col-lg-3">
<div class="well">1</div>
</div>
<div class="col-xs-6 col-sm-4 col-lg-3">
<div class="well">1</div>
</div>
<div class="col-xs-6 col-sm-4 col-lg-3">
<div class="well">1</div>
</div>
<div class="col-xs-6 col-sm-4 col-lg-3">
<div class="well">1</div>
</div>
<div class="col-xs-6 col-sm-4 col-lg-3">
<div class="well">1</div>
</div>
<div class="col-xs-6 col-sm-4 col-lg-3">
<div class="well">1</div>
</div>
<div class="col-xs-6 col-sm-4 col-lg-3">
<div class="well">1</div>
</div>
<div class="col-xs-6 col-sm-4 col-lg-3">
<div class="well">1</div>
</div>
<div class="col-xs-6 col-sm-4 col-lg-3">
<div class="well">1</div>
</div>
<div class="col-xs-6 col-sm-4 col-lg-3">
<div class="well">1</div>
</div>
<div class="col-xs-6 col-sm-4 col-lg-3">
<div class="well">1</div>
</div>
<div class="col-xs-6 col-sm-4 col-lg-3">
<div class="well">1</div>
</div>
<div class="col-xs-6 col-sm-4 col-lg-3">
<div class="well">1</div>
</div>
</div>
</div>
我会注意到我在这里使用.well来显示完整的容器大小。您可能希望用一些自定义包装器替换它，这可能还需要额外的边距/填充代码。