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

Question

请看这个:

[删除]

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

不确定如果我决定像您有时使用其他 CSS 网格框架那样使用 Twitter Bootstrap 响应式网格(例如，某些设计仅限于 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;
}

}