Bootstrap 3媒体网格:动态生成的,不同的col类和媒体查询

时间:2013-12-11 04:23:51

标签: php wordpress twitter-bootstrap-3

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

我在每个缩略图中使用三个Bootstrap 3列类:.col-xs-4,.col-md-3和.col-lg-2,这样在小屏幕上有3个缩略图,4个缩略图大屏幕上的中型屏幕和6个缩略图。

由于每行的缩略图数量可变,具体取决于屏幕尺寸,因此我无法像往常一样基于循环计数器以预定数量的缩略图打开和关闭div.row。

所以我想知道如何最好地打开/关闭必要的bootstrap div.row,具体取决于该特定媒体查询每行显示的缩略图项目数量?

2 个答案:

答案 0 :(得分:0)

行类直接用于两个目的。大多数情况下,它们具有负边缘以补偿外部柱的边缘。而且他们的呼吸空间往往有最低限度。

话虽如此,您应该能够将所有.col- *缩略图包装器放入带有行类的单个div中,并让列类为您处理包装。您可能需要在缩略图底部添加边距以匹配行的间距(如果需要)。

答案 1 :(得分:0)

如果整个网格中的所有缩略图都在一个大的<div class=row> ... </div>范围内,它会对您的设计有效吗?

Bootstrap应该仍然自动将它们推送到正确的顺序吗?