混合宽度的布局。就是，你可以决定布局在不同尺寸的设备下的不同的变化。比如之前我们做的那个简单的两栏布局。你可以让这个布局，在手机设备上是一种样式，在平板上是一种样式，在桌面电脑上是一种样式。

现在，我们这里有两块用 div 标签包装的内容 ... 在上面，还没有使用布局用的风格类 ... 先到浏览器上看一下 ...

默认这两块内容，都堆叠在一块儿显示 ... 而且不管在什么样宽度的窗口下面，他们都会堆叠在一块儿 ....

回到编辑器 ... 现在，我们想让这两块内容 ... 在手机这样的尺寸的设备上，各占一半显示在同一排 ... 应用在手机尺寸的设备上的风格类是 col-xs ...

各占一半的话，可以分别在这两块内容上面，添加一个 col-xs-6 ... 因为 Bootstrap 的网格系统是把页面分成了 12 栏 ... 一半正好就是 6 栏网格 ...

保存 ... 回到浏览器 ... 刷新 ...

你会发现，在任意宽度的窗口下 ... 这两块内容都会各占一半显示 ....

现在， 我们想在平板尺寸的设备下，改变这个布局的显示 ... 可以让主体占用 8 栏网格，让边栏占用剩下的 4 栏网格 ...

回到编辑器 ... 在要布局的容器上面，可以继续去添加其它的网格类 .... 应用在平板尺寸设备上的网格类是 col-sm .... 在主体的容器上，添加一个 col-sm-8 .... 然后在 边栏上面，再添加一个 col-sm-4 ...

这样，当窗口的宽度在平板设备的宽度以上的时候，就会应用这种 col-sm 类型的网格类 ... 这些类上的样式，会覆盖掉前面的应用在更小尺寸上的网格类的样式 ...

保存 ... 再回到浏览器 ... 刷新一下 ...

窗口宽度缩小一下 ... 当前会使用 col-xs 这样的网格类的样式 ... 主体跟边栏各占一半的宽度 ...

再放大一下窗口的宽度 ... 到一定程度的时候，也就是窗口的宽度大于等于 768 像素的时候，就会去使用 col-sm 这样的网格类 ... 因为在主体上使用了一个 col-sm-8，所以这块内容，会占用 8 栏网格的宽度 ...

剩下的 4 个网格的宽度，会用在边栏上面 ...

再回到编辑器 ... 我们可以继续去添加其它类型的网格类 ... 比如我们让主体这块内容，在普通的桌面设备上，占用 9 个风格的宽度 ... 这里可以再用一个 col-md-9 ...

然后把剩下的 3 个网格的宽度，留给边栏 ... 在这个元素上，添加一个 col-md-3 ... col-md 类型的网格类，会在窗口的宽度大于等于 992 像素的时候使用 ...

最后，还有一种为大尺寸的桌面设备准备的网格类 ... 也就是 col-lg 类型的网格类。这些网格类会用在窗口宽度大于等于 1200 像素的时候。

在这种情况下，我们让主体占用 10 个网格的宽度 ... 在主体内容的容器上再添加一个 col-lg-10 ...

剩下的两个网格的宽度交给边栏 ... 在边栏上，添加一个 col-lg-2 ...

保存 ... 再回到浏览器 ... 刷新 ...

选中主体或者边栏元素 .... 注意应用在这个元素上面的样式的变化 ...

缩小浏览器窗口的宽度 ... 现在， 用在这个主体元素上面的样式是 col-xs-6 ... 它的宽度是 50% ...

然后再慢慢放大窗口的宽度 ....

大概在平板尺寸的设备上的宽度的时候，主体这块内容的容器上，会使用一个 col-sm-8 ，把它的宽度设置成百分之 66.6666 ...

继续放大 ... 在一般的桌面设备宽度的时候 ... 用在主体上的样式来自 col-md-9 这个类 ... 注意在这个类上的样式，会覆盖掉 col-sm ，还有 col-xs 这样的 css 类的样式。

现在，主体的宽度是 75% ...

再放大一下窗口的宽度 ... 当窗口的宽度大于等于 1200 像素的时候，在主体内容的上面，会使用 col-lg-10 这个类的样式，会把主体内容的宽度设置成百分之 83.3333 ...

现在，在应用在边栏上面的样式，也会是来自 col-lg 类型的网格类 ... 这里用的是 col-lg-2 ... 宽度会是百分之 16.6666 ....