.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
前提下宽度总是当前视口的宽度。