bootstrap中的container类和container_fluid类的区别

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）的容器,自动实现响应式”。