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

前提下宽度总是当前视口的宽度。