目录:
1、定义
2、container容器
3、container-fluid容器
内容:
1、定义
.container与.container_fluid是bootstrap中两种不同类型的容器,按照官方的描述,这两者的区别是:
.container类用于固定宽度并支持响应式布局
.container-fluid类用于100%宽度,占据全部视口
2、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内容根据屏幕的宽度的变化通过媒体查询帮我们设置了响应式的宽度变化。
3、container-fluid
.container-fluid { padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; }
所以.container-fluid的宽度自动设置为其父容器宽度的100%。并且相对于其父容器居中。