bootstrap中container类和container-fluid类的区别

Question

bootstrap中container类和container-fluid类的区别

Answer 1

container：固定960px宽度； （如果又引入了响应式样式，则会适当调整；例如1600×900，它会使用1200px ； 参见css文档：
/* 大屏幕 */
@media (min-width: 1200px) { ... }
/* 平板电脑和小屏电脑之间的分辨率 */
@media (min-width: 768px) and (max-width: 979px) { ... }
/* 横向放置的手机和竖向放置的平板之间的分辨率 */
@media (max-width: 767px) { ... }
/* 横向放置的手机及分辨率更小的设备 */
@media (max-width: 480px) { ... }) ）
container-fluid：自适应屏幕宽度，即满屏显示；

Answer 2

.container 类用于固定宽度并支持响应式布局的容器。

1 2 3

<div class="container">   ... </div>

.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。

1 2 3

<div class="container-fluid">   ... </div>