Bootstrap 有三个类型的容器

.container，该容器在每个响应断点设置最大宽度。

.container-fluid, 在所有断点宽度都是: 100%。

. container-{ breakpoint } ，宽度为100% ，直到指定的断点。

下表说明了 .container 和 .container-fluid 以及. container-{ breakpoint } 的宽度width相比的情况。

实战

显示器分辨率为 1920*1080

这个分辨率属于 Large >= 992px 系列，所以显示效果为：

代码

<body>
    <div class="container" style="border:3px solid blue">
        hello
    </div>
</body>

效果图

可以看到div布局的左右两边都有留白。

代码

<body>
    <div class="container-fluid" style="border:3px solid blue">
        hello
    </div>
</body>

效果图

可以看到div布局100%占满了视窗。

代码

<body>
    <div class="container-sm" style="border:3px solid blue">
        hello
    </div>
</body>

效果图

可以看到div布局的左右两边都有留白。与 .container效果一样

代码

<body>
    <div class="container-xl" style="border:3px solid blue">
        hello
    </div>
</body>

效果图

可以看到div布局100%占满了视窗。与 .container-fluid效果一样

如上所示，Bootstrap 生成一系列预定义的容器类，以帮助您构建所需的布局。您可以通过修改 Sass 映射(可以在 _ variables.scss 中找到)来自定义这些预定义的容器类:

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px,
  xxl: 1320px
);

可视化大屏设计 - 总目录