对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. VijosP1595:学校网络(有向图变强连通图)

    描述 一些学校的校园网连接在一个计算机网络上.学校之间存在软件支援协议.每个学校都有它应支援的学校名单(学校a支援学校b,并不表示学校b一定支援学校a).当某校获得一个新软件时,无论是直接得到的还是从 ...

  2. 【转】STL中的set容器的一点总结

    转自 http://www.cnblogs.com/BeyondAnyTime/archive/2012/08/13/2636375.html 1.关于set C++ STL 之所以得到广泛的赞誉,也 ...

  3. UI 界面：技术决定一切

    转自:http://www.cnblogs.com/NEOCSL/archive/2012/12/10/2811153.html 在我看来,肖恩帕克不仅仅是一位技术天才和远见卓识的移动互联网领域先锋. ...

  4. ASCII字符点阵字库的制作和使用

    转自:http://blog.csdn.net/exbob/article/details/6532772 开发环境: Win7,Eclipse,MinGW 1.生成ASCII字符文件 ASCII编码 ...

  5. Oracle查看表空间和表空间中的对象

    select * from user_tables;--查询所有用户表 select username,default_tablespace from user_users;--查询当前表空间sele ...

  6. 关于Flask使用Celery的实践经验分享

      最近大Boss反馈Celery经常出现问题,几经实践终于把问题解决了!于是乎有了这篇博客的诞生,算是一个实践经验的分享吧! 软件版本如下: Celery () Flask () RabbitMQ( ...

  7. php array数组（第二部分）

    array_fill() 用给定的键值填充数组 参数 index 必须.规定返回数组的起始索引. 参数 number 必须.规定填充的元素的数量,其值必须大于0. 参数 value 必须.规定用于填充 ...

  8. JavaScript-导论

    说明:此类博客来自以下链接,对原内容做了标注重点知识,此处仅供自己学习参考! 来源:https://wangdoc.com/javascript/basic/introduction.html 1.什 ...

  9. Go语言调度器之盗取goroutine(17)

    本文是<Go语言调度器源代码情景分析>系列的第17篇,也是第三章<Goroutine调度策略>的第2小节. 上一小节我们分析了从全局运行队列与工作线程的本地运行队列获取goro ...

  10. Automake使用(中级)

    工程地址 automake语言国际化 最初工程目录结构 $ ls -l total 16 drwxrwxr-x. 2 fedora fedora 4096 May 10 10:38 build-aux ...