外部流体网格堆叠，但内部应保持完整 [英] Outer fluid grid stacked, but inner should stay intact

问题描述

我在带有嵌套流体网格的 Bootstrap 布局的移动屏幕上遇到问题.我想让外部流体网格将其列堆叠在窄屏幕上，但内部网格应保持完整.可以在此处找到演示(更新:删除了嵌套的容器流体，但尚未解决问题):http://jsfiddle.net/uLDQM/10/

I have problem on mobile screens with Bootstrap layout which has nested fluid grids. I would like to have the outer fluid grid stack its columns on a narrow screen but the inner grid should stay intact. A demonstration can be found here (UPDATED: removed nested container-fluids but that didn't solve the problem yet): http://jsfiddle.net/uLDQM/10/

我想要什么:

Desktop:
1 2  3 4

Mobile
1 2
3 4

但我有:

Desktop:
1 2  3 4

Mobile
1
2
3
4

推荐答案

如果这对您的设计可行，这里有一种可能性:http://jsfiddle.net/panchroma/uLDQM/9/

If this would be feasible for your design, here is one possibility: http://jsfiddle.net/panchroma/uLDQM/9/

我正在使用媒体查询来覆盖小屏幕的默认行为:

I'm using media queries to overide the default behaviour for small screens:

@media (max-width: 767px){
.span6 .row-fluid .span6 {
width: 48.93617021276595%;
float:left;
}  

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

}

这篇关于外部流体网格堆叠，但内部应保持完整的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！