3.1.1 布局容器

Bootstrap中定义了两个容器类，分别为.container和.container-fluid。容器是Bootstrap中最基本的布局元素，在使用默认网格系统时是必需的。Container容器和container-fluid容器最大的不同之处在于宽度的设定。

Container容器根据屏幕宽度的不同，会利用媒体查询设定固定的宽度，当改变浏览器的大小时，页面会呈现阶段性变化。意味着Container容器的最大宽度在每个断点都发生变化。

.container类的样式代码如下：

在每个断点中，container容器的最大宽度如下代码所示：

container-fluid容器则会保持全屏大小，始终保持100%的宽度。container-fluid用于一个全宽度容器，当需要一个元素横跨视口的整个宽度时，可以添加.container-fluid类。

.container-fluid类的样式代码如下：

下面分别使用.container和.container-fluid类来创建容器。

在IE 11浏览器上显示效果如图3-1所示。

图3-1 容器效果

注释：示例中的border、text-center、align-middle、py-5和bg-light等类，分别用来设置容器的边框、内容水平居中、垂直居中、上下内边距和背景色，这些样式类在后面的章节中将会具体介绍。