html - twitter bootstrap 响应式自定义 div 布局

Question

我正在使用 Bootstrap 的响应式样式表，并且在 div 中有 4 个正方形，跨越 12 列，所以 |3|3|3|3|

当我在移动浏览器中查看时，我看到：
|12|
|12|
|12|
|12|

但我想看：
|6|6|
|6|6|

换句话说，我不希望这些项目一个接一个地出现，一排多两个，下一排两个。

这可能吗？

Answer 1

默认情况下，引导程序的媒体查询执行以下操作：

@media (max-width: 767px)
[class*="span"], .uneditable-input[class*="span"], .row-fluid [class*="span"] {
float: none;
display: block;
width: 100%;
}

为了实现您需要的布局，请设置另一个类似于以下内容的媒体查询：

@media (max-width: 767px)
[class*="span"], .uneditable-input[class*="span"], .row-fluid [class*="span"] {
float: left;
width: 50%;
}

按照您认为合适的方式调整 css。

Answer 2

如果您只关心.span3DIV，则这样的媒体查询将起作用..

@media (min-width: 400px) and (max-width: 767px) {
  .row-fluid .span3 {
    width:44%;
    float:left;
  }
  .row-fluid .span3:nth-child(3) {
    margin-left:0;
  }
}

This would still allow the cols to switch to 100% width (stacked) at less that 400 pixels for tiny screens. Demo: http://bootply.com/69753

Another option is to use the responsive utility classes as shown in this demo:http://bootply.com/64868 ,but this requires separate markup for each responsive "view".