zoukankan      html  css  js  c++  java
  • bootstrap3中container与container_fluid容器的区别

    声明:转自 CSDN博客

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

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

      .container-fluid 类用于 100% 宽度,占据全部视口(viewport)的容器。

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

    <body>
    
        <div class="container" style=" 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="100%;"/>
            </div>
    
        </div>
    
    </body>

    当我这样做了以后,我发现,缩小浏览器宽度到小于800px的值时,内容不再自适应了,所以,我调出了调试台,看了bootstrap.css中对.container的定义:

    .container{
        padding-right:15px;
        padding-left:15px;
        margin-right:auto;
        margin-left:auto
    }
    
    @media (min-768px){
        .container{
            750px
        }
    
    }
    
    @media (min-992px){
        .container{
            970px
        }
    
    }
    
    @media (min-1200px){
        .container{
            1170px
        }
    
    }

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

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

    那么,.container-fluid,又是怎样的呢?

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

    结论
    container 类和container-fluid类的区别体现在是否有随视口宽度改变的margin存在。
    container类所谓的自适应也是通过margin的改变来完成,container-fluid类的百分百宽度是指在固有的15px的padding前提下宽度总是当前视口的宽度。

  • 相关阅读:
    按钮组件如何处理点击事件(将原生事件绑定到自定义组件)
    一个简单的transition动画
    根据路由记录(利用matched)动态生成面包屑导航
    assets和static的异同
    Ceph集群概念以及部署
    腾讯质量效能提升最佳实践:智能自动化测试探索和建设
    腾讯WeTest压测大师通过中国计量科学研究院测试认证,获国家级权威认可
    新办公司每年费用
    2
    Leetcode刷题第三题 无重复字符的最长子串
  • 原文地址:https://www.cnblogs.com/JansXin/p/7895744.html
Copyright © 2011-2022 走看看