对bootstrap框架有一定了解的朋友都知道，一般页面布局中的开头会使用到container或container-fluid类，那么它们有什么区别呢？不急！下面为您讲解。

我们先来看看官方对这两个类是怎么说的：

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

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

实例测试：

<!DOCTYPE html>

<html>

    <head>

        <title>响应式布局容器 - container和container-fluid</title>

        <meta charset="UTF-8">

        <meta name="viewport" content="width=device-width, initial-scale=1">

        <link rel="stylesheet" href="https://apps.bdimg.com/libs/bootstrap/3.2.0/css/bootstrap.min.css">

        <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>

          <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

    </head>

    <body>

        <div class="container" style="background-color: red;">

            <div>container类</div>

        </div>

        <div class="container-fluid" style="background-color: blue;">

            <div>container-fluid类</div>

        </div>

    </body>

</html>

效果图：

二者之间的共同点为，两者都可以将高度设置成auto，即自动模式。最大的不同就是宽度的设定上。

container根据屏幕宽度利用媒体查询，已经设定了固定的宽度，作用为阶段性的改变宽度，所以在改变浏览器的大小时，页面是一个阶段一个阶段变化的。

container-fluid则是将宽度设定为auto，所以当缩放浏览器时，它会保持全屏大小，始终保持100%的宽度。

总结：
1)container类出现内边距和外边距，.container-fluid类没有。
2)container类左右内边距一直是15px，屏幕小于等于767px的时候没有margin值，屏幕大于767px开始有左右margin值，屏幕宽度为768px和1000px的时候，margin值相对最小，分别是9px和15px，其他时候margin值随着屏幕的增大而增大。.container-fluid类宽度不管屏幕宽度大小，一直是100%。

bootstrap中container和container-fluid的区别与用法的更多相关文章

  1. Linq中 AsQueryable(), AsEnumerable()和ToList()的区别和用法

    Linq中 AsQueryable(), AsEnumerable()和ToList()的区别和用法:在写LINQ语句的时候,往往会看到AsEnumerable() ,AsQueryable() 和T ...

  2. MVC+Spring.NET+NHibernate .NET SSH框架整合 C# 委托异步 和 async /await 两种实现的异步 如何消除点击按钮时周围出现的白线？ Linq中 AsQueryable(), AsEnumerable()和ToList()的区别和用法

    MVC+Spring.NET+NHibernate .NET SSH框架整合   在JAVA中,SSH框架可谓是无人不晓,就和.NET中的MVC框架一样普及.作为一个初学者,可以感受到.NET出了MV ...

  3. SQL中distinct 和 row_number() over() 的区别及用法

    1 前言 在咱们编写 SQL 语句操作数据库中的数据的时候,有可能会遇到一些不太爽的问题,例如对于同一字段拥有相同名称的记录,我们只需要显示一条,但实际上数据库中可能含有多条拥有相同名称的记录,从而在 ...

  4. Python中list,tuple,dict,set的区别和用法

    Python语言简洁明了,可以用较少的代码实现同样的功能.这其中Python的四个内置数据类型功不可没,他们即是list, tuple, dict, set.这里对他们进行一个简明的总结. List ...

  5. .NET中的三种Timer的区别和用法

    最近正好做一个WEB中定期执行的程序,而.NET中有3个不同的定时器.所以正好研究研究.这3个定时器分别是: //1.实现按用户定义的时间间隔引发事件的计时器.此计时器最宜用于 Windows 窗体应 ...

  6. .NET中的三种Timer的区别和用法(转)

      最近正好做一个WEB中定期执行的程序,而.NET中有3个不同的定时器.所以正好研究研究.这3个定时器分别是: //1.实现按用户定义的时间间隔引发事件的计时器.此计时器最宜用于 Windows 窗 ...

  7. Altium中Fill,Polygon Pour,Plane的区别和用法

    Fill:表示绘制一块实心的铜皮,将区域中的所有连线和过孔连接在一块,而不考虑是否属于同一个网络.假如所绘制的区域中有VCC和GND两个网络,用Fill命令会把这两个网络的元素连接在一起,这样就有可能 ...

  8. Asp.Net Core中服务的生命周期选项区别和用法

    在做一个小的Demo中,在一个界面上两次调用视图组件,并且在视图组件中都调用了数据库查询,结果发现,一直报错,将两个视图组件的调用分离,单独进行,却又是正常的,寻找一番,发现是配置依赖注入服务时,对于 ...

  9. Python中list,tuple,dict,set的区别和用法(转)

    原文地址:http://www.cnblogs.com/soaringEveryday/p/5044007.html Python语言简洁明了,可以用较少的代码实现同样的功能.这其中Python的四个 ...

  10. 转：.NET中的三种Timer的区别和用法(转)

    //1.实现按用户定义的时间间隔引发事件的计时器.此计时器最宜用于 Windows 窗体应用程序中,并且必须在窗口中使用. System.Windows.Forms.Timer // 2.提供以指定的 ...

随机推荐

  1. Ubuntu下Apache重启错误:Could not reliably determine解决

    错误信息:apache2: Could not reliably determine the server's fully qualified domain name, using 127.0.1.1 ...

  2. 兼容ie6，ie7，ie8，firefox，chrome浏览器的代码片段

    hack实现方式和原理 #hacker{ color:red; *color:white; /*for ie6,ie7*/ *+color:blue; /*for ie7*/ _color:gray; ...

  3. Spring 3.1新特性之三：Spring支持Servlet 3.0(待补充)

    高效并发是JDK 1.6的一个重要主题,HotSpot虚拟机开发团队在这个版本上花费了大量的精力去实现各种锁优化技术,如适应性自旋(Adaptive Spinning).锁削除(Lock Elimin ...

  4. linux查询内存真是利用率

    使用top工具查看到Suse Linux的内存占用率很大,可能97%以上,我知道这是Linux的内存使用机制,先将内存整个管理起来,需要的时候在分配给单个进程.但是如果我需要查看系统真实的内存占用率应 ...

  5. 【240】◀▶IEW-Unit05

    Unit 5 Education: Study Abroad 表格技巧讲解 1. Model1对应表格分析 This table shows the numbers of international ...

  6. [hdu4405]Aeroplane chess(概率dp)

    题意:某人掷骰子,数轴上前进相应的步数,会有瞬移的情况,求从0到N所需要的期望投掷次数. 解题关键:期望dp的套路解法,一个状态可以转化为6个状态,则该状态的期望,可以由6个状态转化而来.再加上两个状 ...

  7. 关于JSP页面中的pageEncoding和contentType两种属性的区别

    转自:http://blog.csdn.net/dragon4s/article/details/6604624 JSP指令标签中<%@ page contentType="text/ ...

  8. phpstudy配置php7.1.11

    php7.1.11下载地址 http://windows.php.net/download/ 下载之后,解压. 重名的为php-7.1.11-nts 移动到phpStudy的php目录下 然后重启ph ...

  9. vs2013代码模板设置

    模板设置是为了在“添加新项”时默认格式 1.打开文件:D:\Program Files (x86)\Microsoft Visual Studio 12.0\Common7\IDE\ItemTempl ...

  10. Ext.apply(src,apply) 和 Ext.applyIf(src,apply)比较(转)

    Ext.onReady(function(){ /* * Ext.apply(src,apply) 和 Ext.applyIf(src,apply) 两个方法的使用和区别比较 */ //Ext.app ...