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

  .Container与.container_fluid是bootstrap中的两种不同类型的外层容器，其两者的区别：

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

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

一开始，我以为container所谓固定宽度是开发者可以设置该容器为固定宽度，所以我采用了如下布局样式：

<div class="container" style="width: 800px;">
	<h3>hello world</h3>
</div>

这样做后，缩小浏览器宽度到小于800px的值，内容就不自适应了，这时打开控制台，会看到 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内部根据屏幕宽度利用媒体查询，帮我们设置了固定宽度
并且能够自适应。

由此看，无论何种情况下，请不要手动为响应式布局中的外层布局容器设置固定宽度值

接下来container-fluid

<div class="container-fluid">
	<h3>hello world</h3>
</div>

会自动设置为外层视图的100%，如果外层视窗为body，那么它将全屏显示，无论屏幕大小，并且自动实现响应式布局
结论：

container 类和container-fluid类的区别体现在是否有随视口宽度改变的margin存在   

   container类所谓的自适应也是通过margin的改变来完成，container-fluid类的百分百宽度是指在固有的15px的padding前提下宽度总是当前视口的宽度。