对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. Jasper-template

    ylbtech-Jasper: 1.返回顶部   2.返回顶部   3.返回顶部   4.返回顶部   5.返回顶部     6.返回顶部   作者:ylbtech出处:http://ylbtech. ...

  2. DataWindow.Net V2.5原始文件下载

    DW2.5 原始安装程序下载 http://download.sybase.com/eval/datawindowNET_25_eval/CD50090-55-0250-01.zip

  3. 推荐一款让你纵横Github的读码神器

    当我们想深入了解一个开源项目的时候,通常我们有以下几种姿势: 懒汉型 通过Web的方式,逐个的点击页面寻找和查看具体的源码内容. 优点:不依赖任何工具,无须任何额外的操作 缺点:效率低下,查找文件不便 ...

  4. 剑指Offer的学习笔记（C#篇）-- 不用加减乘除做加法

    题目描述 写一个函数,求两个整数之和,要求在函数体内不得使用+.-.*./四则运算符号. 一 . 理解题目 这个题目可以让我们回归到小学,想想加法的竖式是怎么写的,哈哈,如果当时你不是那个竖式写错了, ...

  5. HTTP之间的区别和特性

    一. Http 简介 Http,学名超文本传输协议 它理解起来并不复杂,平时并不起眼,但经常使用; 前后端交互,多数依赖于http协议,重要性看个人理解,我不敢使用个人认为不掌握的技术; 二. HTT ...

  6. 18.使用for循环计算+1-3+5-7+9-11+13...99的结果

    j = 1 # -1 num1 = 0 #1-3 for i in range(1,100,2): num1 += j * i # -3 j = j * -1 # 1 print(num1) sum1 ...

  7. shell编程 条件判断式----利用 if .... then ----多重

    条件判断式----利用 if .... then ----多重 在同一个数据的判断中,如果该数据需要进行多种不同的判断时,应该怎么作?举例来说,上面的 sh06.sh 脚本中,我们只要进行一次 $yn ...

  8. 湖南大学新生赛C，G，J题解

    C: 思路:做几组数据就基本能发现规律,奇数为-1,偶数为1 代码: #include<cstdio> #include<iostream> #include<cstri ...

  9. 15 Puzzle LightOJ - 1121

    https://cn.vjudge.net/problem/LightOJ-1121 #include<cstdio> #include<algorithm> #include ...

  10. Core2.0 项目到2.1

    Core2.0 项目到2.1 https://www.cnblogs.com/FlyLolo/p/ASPNETCore2_10.html .NET Core 2.1 终于发布了, 赶紧升级一下. 一. ...