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

Posted 2023-03-26

参考技术A 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）的容器,自动实现响应式”。