bootstrap3中container与container_fluid容器的区别

.Container与.container_fluid是bootstrap中的两种不同类型的外层容器，按照官方的说法，这两者的区别是：

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

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

一开始，我以为所谓固定宽度是开发者可以设置该容器为固定宽度
当我这样做了以后，发现事情并不简单（微笑脸），缩小浏览器宽度到小于900px的值时，内容不再自适应了，所以，我调出了调试台，看了bootstrap.css中对.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
    }

}

所谓固定宽度并不是允许开发者自己设置容器的宽度，而是bootstrap内部根据屏幕宽度利用媒体查询，帮我们设置了固定宽度，并且是能够自适应的。
下面进行了简单测试，图片中的标签页组件外层是<div class="container"><div>,调整窗口的大小，盒模型（图片右下角）显示的宽度的确是是750px和970px.
窗口宽900px:

窗口宽1000px:

而且可以看出内容都是自动居中的，验证了bootstrap.css中对.container的定义。
所以，请不要手动为响应式布局中的外层布局容器设置固定宽度值。
那么，.container-fluid，又是怎样的呢？
根据测试，.container-fluid自动设置为外层视窗的100%，如果外层视窗为body，那么它将全屏显示，无论屏幕大小，并且自动实现响应式布局。