固定cols宽度，cols /行数取决于屏幕宽度

Question

使用Bootstrap 3，我正在寻找一种网格布局，其中列宽在任何屏幕分辨率上固定（假设为200像素），但它们的数量取决于屏幕宽度。

换句话说，我知道列的宽度，但我不知道每行会有多少列，因为它取决于屏幕宽度。然后，单元格之间的边距也取决于屏幕宽度。

当屏幕宽度较大时，必须有很多列，但行数很少：

 ______________________________________________________________
|   ___________    ___________    ___________    ___________   |
|  |           |  |           |  |           |  |           |  |
|  |    #1     |  |    #2     |  |    #3     |  |    #4     |  |
|  |<- 200px ->|  |<- 200px ->|  |<- 200px ->|  |<- 200px ->|  |
|  |           |  |           |  |           |  |           |  |
|  |___________|  |___________|  |___________|  |___________|  |
|   ___________                                                |
|  |           |                                               |
|  |    #5     |                                               |
|  |<- 200px ->|                                               |
|  |           |                                               |
|  |___________|                                               |
|______________________________________________________________|

当屏幕宽度较小时，列数必须很少，但行数很多。

               ________________________________
              |   ___________    ___________   |
              |  |           |  |           |  |
              |  |    #1     |  |    #2     |  |
              |  |<- 200px ->|  |<- 200px ->|  |
              |  |           |  |           |  |
              |  |___________|  |___________|  |
              |   ___________    ___________   |
              |  |           |  |           |  |
              |  |    #3     |  |    #4     |  |
              |  |<- 200px ->|  |<- 200px ->|  |
              |  |           |  |           |  |
              |  |___________|  |___________|  |
              |   ___________                  |
              |  |           |                 |
              |  |    #5     |                 |
              |  |<- 200px ->|                 |
              |  |           |                 |
              |  |___________|                 |
              |________________________________|

有哪些解决方案？

我尝试了Bootstrap grid system，但你仍需要指定每行的cols数量（或者我没有得到如何使用它）。

Answer 1

网格系统用于创建响应部分并将它们放在彼此的上方或侧面，但是您要查找的内容没有响应，您的元素是固定的。我认为你可以用简单的风格轻松完成。例如，将所有元素放在一个具有全宽的列中，然后设置它们的样式。

div{
    width:100px;
    height:100px;
    background:#aaa;
    margin:15px;
    float:left;
}

这里是DEMO。