Bootstrap布局容器

容器是Bootstrap中最基本的布局元素，在使用默认网格系统时，容器是必需的。容器用于在其中容纳、填充一些内容，以及有时需要使内容居中。容器中可以嵌套容器，不过大多数布局不需要嵌套容器。

在实现Bootstrap页面布局容器之前，需要了解设备屏幕的尺寸，具体如表1所示。

表1 屏幕尺寸

表1中，当屏幕尺寸小于576px时，表示超小设备；当屏幕尺寸大于等于576px时，表示平板；当屏幕尺寸大于等于768px时，表示桌面显示器；当屏幕尺寸大于等于992px时，表示大桌面显示器；当屏幕尺寸大于等于1200px时，表示超大桌面显示器。

在前面讲解的内容中，我们学习了媒体查询的使用方法，需要使用@media关键字检测设备的宽度变化。在Bootstrap中，我们不需要编写媒体查询的代码，而是使用一些内置的类名，用来检测不同的设备的宽度。

Bootstrap带有3个不同的容器，具体如下。

（1） .container容器，它在每个响应断点处设置了一个max-width最大宽度。

（2） .container-fluid容器，它在每个响应断点处设置布局容器的宽度为100%。

（3） .container-{breakpoint}容器，它在每个响应断点处设置布局容器的宽度为100%，直到达到指定的断点为止。其中，breakpoint的取值允许的范围有sm、md、lg和xl。

需要注意的是，max-width对每个较高的断点应用。其中，断点分别表示sm、md、lg和xl，sm表示超小设备、md表示平板、lg表示桌面显示器和xl表示大桌面显示器。例如，.container-sm表示在屏幕宽度小于576px时，容器的宽度为100％宽度；当屏幕宽度大于等于576px时.container-sm到达断点。

每个容器中的.container-fluid和.container等类，以及每个断点之间的比较，如表2所示。

表2 响应式布局容器

表2中，除了原始容器.container以及.container-fluid外，还展示了在不同断点处，布局容器的宽度。例如，.container-sm，其breakpoint的值为sm，表示超小设备下布局容器的宽度为100%。同理，md表示在平板下布局容器的宽度为100%；lg表示在桌面显示器下布局容器的宽度为100%；xl表示在超大桌面显示器下布局容器的宽度为100%。