Bootstrap 2 并与 Bootstrap 3 相比使用网格

Question

我刚刚继承了一个不幸使用 Bootstrap 2 的项目，我习惯使用 Bootstrap 3 但之前从未使用过版本 2。

我已经阅读了一些关于差异的内容，据我了解，列的工作方式是使用 span*，其中 * 表示您希望该元素跨越的列数。

但是我对如何根据不同的断点进行更改感到困惑？

例如在 Bootstrap 3 你可以这样做：

col-sm-4
col-md-8

如何更改 Bootstrap 2 中的元素？

Answer 1

你不能！ bootstrap 3.x 网格系统为不同的设备预定义了类 - col-xs-*、.col-sm-*、.col-md-* 和 .col-lg-*。

Bootstrap 2.x 还没有。它有一个预定义系统类，仅适用于一个视口：

The default Bootstrap grid system utilizes 12 columns, making for a 940px wide container without responsive features enabled. With the responsive CSS file added, the grid adapts to be 724px and 1170px wide depending on your viewport. Below 767px viewports, the columns become fluid and stack vertically.

要在 bootstrap 2.x 中实现与 3.x 相同的行为，您必须 include bootstrap-responsive.css 包含硬编码的 .span 宽度（以及更多）不同的媒体尺寸，实际上与 col-xs-* 等相同：

@media (min-width: 768px) and (max-width: 979px) {
...
  .span3 {
    width: 166px;
  }
  .span2 {
    width: 104px;
  }
  .span1 {
    width: 42px;
  }
...

因此在 bootstrap 2.x .span1 中与 col-xs-1、.col-sm-1、.col-md-1 和 .col-lg-1 相同，具体取决于在视口上，如果包含 bootstrap-responsive.css。

Bootstrap 2 并与 Bootstrap 3 相比使用网格

Bootstrap 2 and working with the grid compared to Bootstrap 3

twitter-bootstrap

twitter-bootstrap-2