如何制作无法在单列中堆叠所有内容的引导响应式布局？

Question

首先，我是前端开发的新手，所以请耐心等待。希望我可以使用正确的术语来描述我想要解决的问题。我最近开始使用Twitter的bootstrap框架，我试图弄清楚是否可以有以下流体布局：

说，这是主要布局，一行有4个span3s。

1111 3333 2222 4444

调整屏幕大小时，该行中的列会在一列中堆叠如下：

1111

3333

2222

4444

我想弄清楚的是，如果有足够的屏幕大小，是否有可能以这种方式堆叠它们：

1111 3333

2222 4444

然后如果屏幕尺寸变得非常小，那么就像上面提到的那样做一个列堆栈：

1111

3333

2222

4444

感谢。

Answer 1

您可以使用此类媒体查询覆盖.span3上的Bootstrap默认宽度。当屏幕为768px或更低时，Bootstrap通常会将span*更改为100％宽度。

@media (min-width: 768px) and (max-width: 980px) {
  .span3 {
    width:41%;
  }
  .span3:nth-child(3) {
    margin-left:0;
  }
}

您可能需要相应地调整边距和宽度。

Demo on Bootply

Answer 2

当您从他们的主页（http://twitter.github.io/bootstrap/，而不是通过他们的自定义页面或通过GitHub项目）下载Bootstrap时，它将响应样式分成自己的文件。然后，您可以调整/覆盖媒体查询（@media ...）以实现您所需的内容，而无需混淆其他Bootstrap基线样式。正如你提到的一位评论者所说，你所描述的并不是开箱即用的结核病，但实现起来并不困难。

我建议使用内联块的显示向左移动跨度（可能使用* display：inline; * zoom：1;如果需要支持，则为IE7的hack），以便某些媒体查询将它们带到如上所述。