css - 如何制作不将所有内容堆叠在单列中的 Bootstrap 响应式布局？

Question

首先，我是前端开发的新手，请多多包涵。希望我可以使用正确的术语来描述我要解决的问题。我最近开始使用 Twitter 的 bootstrap 框架，我想弄清楚是否可以有以下流畅的布局:

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

1111 3333 2222 4444

当屏幕调整大小时，该行中的列堆叠在单个列中，如下所示:

1111

3333

2222

4444

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

1111 3333

2222 4444

然后，如果屏幕尺寸变得非常小，则按照上面提到的那样进行单列堆叠:

1111

3333

2222

4444

谢谢。

Answer 1

您可以使用这样的媒体查询来覆盖 .span3 上 Bootstrap 的默认宽度。当屏幕为 768 像素或更小时，Bootstrap 通常会将 span* 更改为 100% 宽度。

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

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

Demo on Bootply