使用 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 ，但您仍然必须指定每行的列数(否则我不知道如何使用它)。
最佳答案
网格系统用于创建响应式部分并将它们放在彼此的上方或侧面，但您正在寻找的不是响应式的，您的元素是固定的。我认为你可以用简单的风格轻松地做到这一点。例如，将所有元素放在一个全宽的列中，然后设置它们的样式。
div{
width:100px;
height:100px;
background:#aaa;
margin:15px;
float:left;
}
这里是 DEMO .
关于html - 固定列宽，列数/行数取决于屏幕宽度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20190008/