Question

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

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

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

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

这可能吗？

Answer 1

默认情况下，bootstrap的媒体查询执行以下操作：

@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

如果您只关注.span3 DIV，则此类媒体查询将有效..

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

对于小屏幕，这仍然允许cols切换到100％宽度（堆叠），小于400像素。演示：http://bootply.com/69753

另一种选择是使用本演示中显示的响应式实用程序类：http://bootply.com/64868，但这需要为每个响应式“视图”单独标记。

twitter bootstrap响应自定义div布局

2 个答案: