使用 Bootstrap 根据屏幕大小更改行中 Div 元素的数量

Question

是否可以<div>根据 Bootstrap 的屏幕大小使用不同数量的元素？

例如，桌面上每行 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 的响应式实用程序，我可以在其中隐藏或显示某些屏幕尺寸的列。然而，这意味着我必须重复大量的列（参见下面的片段），所以我希望有一个更干净的解决方案。

+-----------+-----------+-----------+-----------+
| .col-md-3 | .col-md-3 | .col-md-3 | .col-md-3 |
+-----------+-----------+-----------+-----------+
| .col-md-3 | .col-md-3 | .col-md-3 | .col-md-3 |
+-----------+-----------+-----------+-----------+

据我所知，您不能遗漏包含的.rowdiv。能够将class="col-md-3 col-sm-4 col-xs-6"所有元素放入并让引导程序将任意数量的<div>s 加起来为 12。所以在中等屏幕上有 4 个，在小屏幕上有 3 个，在超小屏幕上有 2 个。

Answer 1

根据我在原始查询中的评论，这是对.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>

我要注意的是，我使用.wellhere 来显示完整的容器大小。您可能想用一些自定义包装器替换它，这也可能需要额外的边距/填充代码。