对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. TCP/IP 详解卷一之 HTTP协议

    HTTP协议 简介 超文本传输协议(HypertextTransfer Protocol,简称HTTP)是应用层协议.HTTP 是一种请求/响应式的协议,即一个客户端与服务器建立连接后,向服务器发送一 ...

  2. 对于makefile传递参数的一些问题

    makefile变量说明: 1.总控Makefile中使用“-e”参数覆盖下一层Makefile中的变量. 2.父级Makefile向子级Makefile传送变量方式:export <varia ...

  3. string实现

    #include<iostream> using namespace std;   class String{     friend ostream& operator<&l ...

  4. 解决ubuntu下filezilla登录ftp看不到中文目录和文件的问题 (转载)

    转自:http://blog.csdn.net/duguteng/article/details/7716283 打开filezilla 文件-站点管理器-新站点--字符集--使用自定义的字符集 ,填 ...

  5. linux抢占式调度

    为什么会发生调度?   因为cpu是有限的,而操作系统上的进程很多,所以操作系统需要平衡各个进程的运行时间 比如说有的进程运行时间已经很长了,已经占用了cpu很长时间了,这个时候操作系统要公平 就会换 ...

  6. Automake使用(初级)

    工程地址 https://github.com/silvermagic/automakeDev.git 最初工程目录结构 $ vim main.cpp $ vim src/main.cpp ls -l ...

  7. codeforces494C Helping People【treedp+概率dp】

    区间不交叉,可以看出区间构成了树形结构,建出树之后,设f[u][i]为u这个区间最大值最多加i的概率,转移是\( f[u][i]=p[u]*\prod f[v][mxu-mxv-1]+(1-p[u]) ...

  8. 约数和问题 (codevs2606 && 洛谷2424)

    P2424 约数和 题目背景 Smart最近沉迷于对约数的研究中. 题目描述 对于一个数X,函数f(X)表示X所有约数的和.例如:f(6)=1+2+3+6=12.对于一个X,Smart可以很快的算出f ...

  9. html常用标签及属性,常用英语单词

    目录 html常用标签 html常用标签属性 前端常用英语单词表(未完待续) 欢迎评论点赞交流,转发请添加原博客连接谢谢! Ctrl键+F 可以查找你想要的内容哦! html常用标签 htmi结构 & ...

  10. Python学习笔记(异常处理)

    用户输入了一个不合规定的值,或者需要打开的文件不存在.这些情况被称作“异常”,一个好的程序需要能处理可能发生的异常,避免程序因此而中断. 例如我们去打开一个文件: f = file('non-exis ...