声明：转自 CSDN博客

.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="data:image/QQ截图20150423144403.png" alt="" style="width:100%;"/>

        </div>

    </div>

</body>

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

    }

}

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

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

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

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

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

bootstrap3中container与container_fluid容器的区别的更多相关文章

  1. bootstrap3中container与container_fluid的区别

    .container与.container_fluid是bootstrap中的两种不同类型的外层容器,按照官方的说法,这两者的区别是: .container 类用于固定宽度并支持响应式布局的容器. . ...

  2. Bootstrap3中.container和.container-fluid区别

    .container与.container_fluid是bootstrap中的两种不同类型的外层容器,按照官方的说法,这两者的区别是: .container 类用于固定宽度并支持响应式布局的容器..c ...

  3. Init Container（初始化容器）

    在很多应用场景中,应用在启动之前都需要进行如下初始化操作. ◎ 等待其他关联组件正确运行(例如数据库或某个后台服务). ◎ 基于环境变量或配置模板生成配置文件. ◎ 从远程数据库获取本地所需配置,或者 ...

  4. .Container与.container_fluid区别

    .Container与.container_fluid是bootstrap中的两种不同类型的外层容器,两者的区别是:.container 类用于固定宽度并支持响应式布局的容器..container-f ...

  5. [技术博客]Pyqt中View类别容器和Widget类别容器的区别

    Pyqt中View类别容器和Widget类别容器的区别 简介 在beta迭代中,我们选择用pyqt5来重写alpha迭代中使用tkinter库编写的界面. ​ 按钮之类的与tkiner使用无异,在显示 ...

  6. 【bootstrap】.container与.container_fluid

    .container与.container_fluid是bootstrap中的两种不同类型的外层容器,区别是: .container 类用于固定宽度并支持响应式布局的容器.不用你自己设宽度,通过< ...

  7. 简单理解Struts2中拦截器与过滤器的区别及执行顺序

    简单理解Struts2中拦截器与过滤器的区别及执行顺序 当接收到一个httprequest , a) 当外部的httpservletrequest到来时 b) 初始到了servlet容器 传递给一个标 ...

  8. HTML中id、name、class 区别

    参考:http://www.cnblogs.com/polk6/archive////.html http://blog.csdn.net/ithomer/article/details/ HTML ...

  9. css中zoom和transform:scale的区别

    css中zoom和transform:scale的区别 关于zoom: 以前只是看到别人的代码中用过zoom,自己从未使用过,今天在探究ie7兼容inline-block时,发现里面提到了zoom.下 ...

随机推荐

  1. 添加网站标题logo

    如何在标题栏title前添加网站logo? 第一种方法:据说在网站根目录下放着我们的ico型logo,命名为favicon.ico,浏览器会自动去找到并显示.试了试,在firefox23和ie8下都没 ...

  2. BZOJ1898: [Zjoi2005]Swamp 沼泽鳄鱼（矩阵乘法）

    1898: [Zjoi2005]Swamp 沼泽鳄鱼 题目链接:https://www.lydsy.com/JudgeOnline/problem.php?id=1898 Description 潘塔 ...

  3. ACM2647拓扑排序逆运算

    2647题是对工人排序问题,不是从头到尾排序,而是从尾到头排序: 代码中用到vector和queue容器,权当练习. 用广搜进行拓扑排序的逆运算. #include<iostream> # ...

  4. HDU3579 线性同余方程（模板 余数不一定互质）

    Hello Kiki Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Su ...

  5. SQL Server2000安装教程图解

    sql2000安装教程图解... ================================= 第一部分:下载所需要的安装包: 可以自己在网上百度了之后下载--或是直接从我已打包好的群里下载 = ...

  6. ajax 请求数据的两种方法

    实现ajax 异步访问网络的方法有两个.第一个是原始的方法,第二个是利用jquery包的 原始的方法不用引入jquery包,只需在html中编写script 片段 这里我演示的是一个传递参数查询的例子 ...

  7. 51Nod 1009 数字1的个数 | 数位DP

    题意: 小于等于n的所有数中1的出现次数 分析: 数位DP 预处理dp[i][j]存 从1~以j开头的i位数中有几个1,那么转移方程为: if(j == 1) dp[i][j] = dp[i-1][9 ...

  8. 鸽巢排序Pigeonhole sort

    原理类似桶排序,同样需要一个很大的鸽巢[桶排序里管这个叫桶,名字无所谓了] 鸽巢其实就是数组啦,数组的索引位置就表示值,该索引位置的值表示出现次数,如果全部为1次或0次那就是桶排序 例如 var pi ...

  9. 32岁白发菜鸟拿2.6万年薪苦熬10年 NBA首秀便惊艳世人 科比书豪纷纷为他点赞

    这是一场普通的常规赛——斯台普斯球馆,湖人的赛季第81场.比赛的结果也没什么意外:客场作战的火箭106-99带走胜利.然而,这一场的斯台普斯却成了欢乐的海洋,现场甚至喊出了MVP的呼声,这份赞誉,送给 ...

  10. UOJ#204 【APIO2016】Boat

    Time Limit: 70 Sec  Memory Limit: 256 MBSubmit: 559  Solved: 248 Description 在首尔城中,汉江横贯东西.在汉江的北岸,从西向 ...