欢迎各位兄弟 发布技术文章

这里的技术是共享的

You are here

bootstrap 中 container 和 container-fluid 容器的区别

bootstrap 中 container 和 container-fluid 容器的区别

目录:

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%。并且相对于其父容器居中。


来自  https://www.cnblogs.com/leijing0607/p/7272843.html

普通分类: