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

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，但您仍然需要指定每行的列数（或者我不知道如何使用它）。

Answer 1

网格系统用于创建响应式部分并将它们彼此重叠或放在一边，但您正在寻找的不是响应式的，您的元素是固定的。我认为你可以用简单的风格轻松做到这一点。例如，将所有元素放在一个全宽的列中，然后设置它们的样式。

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

这里是DEMO。