Question

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

Answer 1

container的类描述：
.container{
padding-right:15px;
padding-left:15px;
margin-right:auto;
margin-left:auto
}

@media (min-width:768px){
.container{
width:750px
}

}

@media (min-width:992px){
.container{
width:970px
}

}

@media (min-width:1200px){
.container{
width:1170px
}

}

container_fluid的类描述：

.container-fluid {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
当屏幕宽度为1276px时，container类的显示效果为：

container_fluid类的显示效果为：
这时，container类的显示效果中包括margin和padding，而container_fluid类的显示效果中之包括padding。

当屏幕宽度小于768px时，container类的显示效果为：

container_fluid类的显示效果为：

如果浏览器宽度小于768px，则媒体查询部分不再生效，此时，container和container_fluid的显示效果是一样的，都只包括padding。

container 类用于固定宽度并支持响应式布局的容器。
.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器,自动实现响应式。怎么理解这两句话呢？

随着屏幕宽度的改变，container字样的位置是会改变的，因为container类的宽度是750、970或1170。当屏幕宽度为950px时，container类的宽度时750（就是所谓的固定宽度），因此，此时的margin为100px，较1276px时靠有一些了（所谓的响应式布局）。
随着屏幕宽度的改变，container_fluid字样的位置不变，且布局也不变，此所谓“占据全部视口（viewport）的容器,自动实现响应式”。