Bootstrap 3媒体网格:动态生成，不同的classes和媒体查询

Question

我有一个简单的网格缩略图，我正在布局-缩略图项目是动态生成的，并通过wordpress循环输出。

对于每个缩略图，我使用了Bootstrap 3列类中的三个：.col-xs-4、.col-md-3和.col-lg-2，这样在小屏幕上有3个缩略图，在中屏上有4个缩略图，在大屏幕上有6个缩略图。

因为每行缩略图的数量取决于屏幕大小，所以我不能像往常那样根据循环计数器以预定义数量的缩略图打开和关闭div.row。

所以我想知道如何根据在特定媒体查询中每行显示多少个缩略图项目来最好地打开/关闭必要的引导div.row？

Answer 1

row类直接用于两个目的。大多数情况下，它们的边距为负值，以补偿外部列的边距。而且他们往往有呼吸空间的底部边缘。

也就是说，您应该能够将所有的.col-*缩略图包装器放入具有row类的单个div中，并让column类为您处理包装。您可能需要在缩略图中添加边距底部，以匹配行的间距(如果需要)。

Answer 2

如果你的整个网格中的所有缩略图都在一个大的<div class=row> ... </div>中，那么它是否适用于你的设计？

Bootstrap是否应该自动将它们推送到正确的顺序？