2

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

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

1111 3333 2222 4444

调整屏幕大小时，该行中的列堆叠为一列，如下所示：

1111

3333

2222

4444

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

1111 3333

2222 4444

然后，如果屏幕尺寸变得非常小，则如上所述进行单列堆栈：

1111

3333

2222

4444

谢谢。

4

2 回答 2

3

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

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

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

Demo on Bootply

于 2013-07-09T19:39:26.553 回答
2

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

我建议将跨度浮动到左侧并显示 inline-block （可以使用 *display: inline; *zoom: 1; 如果需要支持，则为 IE7 破解）以使它们按照描述的方式下降.

于 2013-07-09T18:42:17.453 回答