在布局用的元素上，我们可以添加一个 container 这个类 ..

它会给元素添加一个固定的宽度，并且这个宽度会随着浏览窗口的变化而变化 ..

也就是，用了 container 元素的容器会变成响应式的 .. 因为它里面用了媒体查询，就是 Media Query .. Bootstrap 框架里面设置了几个 breakpoint，当浏览窗口的宽度到了某个点上，container 会应用不同的宽度值 ..

为了更清楚的观察一下这个 container 的样式，我们可以在这个元素上添加一个自定义的 css 类，名字是 demo ..

然后在自定义的样式里面，给这个 .container.demo 添加点样式 .. 添加一个背景颜色 .. 设置成 #054bd1 ..

height 把高度设置成 100vh .. 文字的 color 设置成 white ... 再添加一个 -webkit-font-smoothing ，设置成 antialiased ..

预览

到浏览器上预览一下 .. 页面上的这块蓝色区域就是 container 元素 .. 它会有个固定的宽度，并且会居中在页面上显示 ..

打开浏览器的开发者工具 ... 再打开这个 device toolbar ..

再打开元素选项卡 ... 选中页面上这个 container 类所在的元素 .. 观察现在这个 container 上的样式 .. 现在它的最大宽度是 960 像素 ..

设备这里先选择这个 Responsive .. 然后先放大浏览窗口的宽度 .. 到一定程度以后，你会发现 container 的宽度会有变化 .. 现在它的 max-width ，最大宽度是 1140 像素 ..

继续再缩小浏览窗口的宽度，现在又变成了 960 .. 继续再缩小 .. container 的宽度现在是 720px .. 再缩小一下 .. 现在是 540px

继续缩小 .. 最后 container 的宽度会变成 100% ...

fluid

如果我们想让容器的宽度变成流动的 .. 可以在元素上使用一个 container-fluid ...

你会发现使用了 container-fluid 类的容器的宽度会是流动式的 ... 就是它没有固定尺寸的宽度 ..它的宽度会一直是 100% ...