当前位置: article > 正文

bootstrap3中container与container_fluid容器的区别_container与container-fluid

作者：很楠不爱3 | 2024-03-14 01:13:20

踩

container与container-fluid

.container与.container_fluid是bootstrap中的两种不同类型的外层容器，按照官方的说法，这两者的区别是：

.container 类用于固定宽度并支持响应式布局的容器。

.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。

一开始，我以为所谓固定宽度是开发者可以设置该容器为固定宽度，所以我采用了如下布局样式：

<body>

    <div class="container" style="width: 800px" >

        <div class="col-md-6">

            <p>官方解释container容器用于固定宽度并且能够自适应布局，我现在给外层应用了container类的div设置一个固定宽度800px，用来测试是否能实现自适应</p>

        </div>

        <div class="col-md-6">
            <img src="image/QQ截图20150423144403.png" alt="" style="width:100%;"/>
        </div>

    </div>



</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

当我这样做了以后，我发现，缩小浏览器宽度到小于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
    }

}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

我忽然明白，所谓固定宽度并不是允许开发者自己设置容器的宽度，而是bootstrap内部根据屏幕宽度利用媒体查询，帮我们设置了固定宽度，并且是能够自适应的。

所以，无论何种情况下，请不要手动为响应式布局中的外层布局容器设置固定宽度值。

那么，.container-fluid，又是怎样的呢？

根据测试，.container-fluid自动设置为外层视窗的100%，如果外层视窗为body，那么它将全屏显示，无论屏幕大小，并且自动实现响应式布局。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/很楠不爱3/article/detail/231654