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

2025-03-17 09:41:49
推荐回答(1个)
回答1:

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