如何使用Twitter Bootstrap做到这一简单的响应式布局？

Question

请看看这个：

http://towhidkashem.com/responsive/

当你调整浏览器，它会从3盒上的一条线直接到1元线。在进入1之前有没有办法让它每行2个？

如果我决定使用twitter bootstrap响应式网格（如有时与其他CSS网格框架一起使用）（例如限制为960像素宽的设计），则不确定是否限制了布局选项。

Answer 1

我喜欢扎伊德的谨慎注意，但如果你真的需要做到这一点，这里的东西让你开始：Live example和jsfiddle

当你的页面布局变得更加复杂，当你添加更多的引导部件，列表的例外，你将不得不添加到自定义的CSS与雪球，所以可能很好，保持简单;）

祝你好运！

CSS

@media(min-width:481px) and (max-width:767px){ 

.row-fluid [class*="span"]{ /* for the above viewpoints, force spans to be 50% */ 
width:48.717948717948715%; 

float:left; 
} 

.row-fluid .span12{ /* override so span12 is full width */ 
width:100%; 
margin-right:0 !important; 
} 


.row-fluid [class*="span"]:first-child { 
margin-left: 0; 
margin-right: 2.5109110747408616%; 
} 

.row-fluid [class*="span"]:last-child { 
float:right; 
} 

}