现在界面上有一排内容，里面等分成了四栏 .. 改变一下浏览窗口的宽度 .. Container 容器的宽度发生变化 .. 它里面包装的内容的宽度也会随着变化 ..

继续缩小浏览窗口的宽度 .. 你会发现不管 Container 容器的宽度是多大，这几栏内容始终会等分一排的宽度 ..

一直到挤的实在是没空了，它们才会换行显示 ..

设备

Bootstrap 里面规定了几种不同的尺寸 .. 小于 576 像素宽度的尺寸是 Extra Small ，表示特小号，比如一般的手机屏幕的宽度就属于 Extra Small ..

大于等于 576 像素的尺寸叫 Small ，会用 sm 表示 ..

大于等于 768 像素的宽度属于 Medium， 中等，会用 md 表示 .. 大于等于 992 像素的是 Large，大号，在 Bootstrap 里面会使用 lg 表示 .. 还有一种是 Extra large，表示特大，宽度是大于等于 1200 像素 .. 这种尺寸会用 xl 表示 ..

现在我们可以改造一下，我想在属于 Extra Small 的设备上，让这些栏可以堆叠在一起显示 .. 选中这几栏内容上面用的这个 column 类 .. 换成 col-sm .. 这样在宽度大于等于 576 像素的浏览窗口的下面，这些栏才会等分宽度 .. 576 像素以下的浏览窗口，它们都会堆叠在一起显示 ..

预览

再去试一下 .. 浏览窗口小于 small 类型的尺寸，也就是小于 576 像素的时候，这些栏会堆叠在一起显示 ... 浏览窗口大于 576 像素 ，就属于 Small 类型的尺寸了，所以这些栏会等分宽度 ..

再去试一下 ..

选中这几个类 .. 加上个具体的网格数，比如 6 ，这样每排会显示两栏内容，因为一排只能显示 12 个网格宽度的内容 ..

后面可以继续再添加一个 col-lg-3 .. 在 Large，就是大尺寸的设备上，每栏占用 3 个网格的宽度，这样一排就可以显示四栏内容 ..

我们再去试一下 ...

小尺寸以下的设备，栏与栏会堆叠在一块儿 ... 小尺寸，还有中等尺寸的宽度 .. 一排会显示两栏内容 ...

在大尺寸的浏览窗口下面，每栏内容会占用 3 个网格宽度 .. 也就是一行会显示四栏内容 .. 因为一行可以显示 12 个网格宽度的内容 ...