请看这个:
[删除]
当您调整浏览器大小时,它会从一行 3 个框直接变为每行 1 个。有没有办法让它在变为 1 之前变为每行 2?
不确定如果我决定像您有时使用其他 CSS 网格框架那样使用 Twitter Bootstrap 响应式网格(例如,某些设计仅限于 960 像素宽的设计),我是否会受到布局选项的限制。
最佳答案
我喜欢 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;
}
}
关于html - 如何使用 Twitter Bootstrap 做这个简单的响应式布局?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15400148/