如果你看过宁皓网之前的课程，用 960 网格系统布局网页，还有之前的 Bootstrap 课程。你应该对布局用的网格系统不陌生。它其实就是把页面分割成了一定份数的网格，常见的比如 12 栏的网格，还有 16 栏的网格。

然后你在布局的时候，可以使用指定的网格数，比如你可以让主体内容占用 12 栏网格其中的 8 份，然后让边栏内容占用剩下的 4 份。 这样主体内容与边栏内容会在同一排上，因为它们加起来正好是 12 份。

Bootstrap 3 用的是 12 栏的网格。不过在元素上应用这些网格有一点区别。在 Bootstrap 3 的网格系统里面，每个网格类有四种类型 ...

.col-xs，col 表示 column ，中文可以翻译成 栏，或者 列 ... xs 表示 Extra small ，特小 ...

是为手机准备的网格类 ... 在窗口的宽度小于 768 像素的时候，会使用 col-xs 这样的网格类。

另外还有 col-sm 类型的网格类 ... sm 表示 small ，这样的网格类会用在小尺寸的设备上，比如平板电脑 ... 窗口的宽度大于等于 768 像素的时候，会使用这样的网格类去布局 ...

col-md ，md 是 medium ，表示中等尺寸的设备 ... 窗口的宽度大于等于 992 像素的时候，会用到这种网格类 ... 在一般尺寸的桌面电脑上，会用到这样的网格类 ...

最后还有 col-lg 前缀的网格类 ... lg 就是 large ，表示大尺寸的设备 ... 在窗口宽度大于等于 1200 像素的时候，会用到这样的网格类 ...

在这些前缀的后面，就是具体的网格数 ... 比如 col-xs-6 ... 意思就是，在手机这样的特小尺寸的设备上，元素会占用 6 个网格的宽度，也就是 50% 的宽度 ...

如果我们没有为元素设置在其它宽度的窗口上的网格类 ... 这个元素就会在所有的宽度的窗口上占用 50% 的宽度 ...

如果你想让这个元素，在一般尺寸的桌面电脑上占用 9 个网格的宽度 ... 可以在它上面，再去添加一个 col-md-9 ... 这样这个元素在特小尺寸的设备，比如手机上，会占用一半的宽度，因为它会应用 col-xs-6 这个类的样式 ... 然后窗口到了一定宽度以后，会让这个元素占用 9 个网格的宽度 ... 因为如果窗口的宽度大于或者等于 992 像素的时候，就会去使用 col-md 类型的网格类 ...