html - 如何使用 Twitter Bootstrap 做这个简单的响应式布局？

Question

请看一下：

[已删除]

当您调整浏览器的大小时，它会从一行 3 个框直接变为每行 1 个。有没有办法让它在去 1 之前达到每行 2？

如果我决定使用 twitter bootstrap 响应式网格，有时我会使用其他 CSS 网格框架（例如，某些限制为 960 像素宽的设计），不确定我是否在布局选项方面受到限制。

Answer 1

我喜欢 Zaid 的警示性说明，但如果你真的需要这样做，这里有一些东西可以帮助你入门：Live example和jsfiddle

随着您的页面布局变得更加复杂，并且随着您添加更多 Bootstrap 组件，您将不得不使用滚雪球将异常列表添加到自定义 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;
}

}