使用过bootstrap的同学都知道,其container与container-fluid都是设置文本居中,但两者还是有很大的区别。

官方给出的解释是:

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

.container-fluid 类用于 100% 宽度,占据全部视口(viewport)的容器。

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

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

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

如果比喻的话,container就如一个嵌套的水池,只有当最里面最小的那个池子注满水后才会溢到下一个更大的池子,而container-fluid则没有隔断,倒入多少水,就充满多少。

还有一点则是使用container时,你会发现在容器外有一个随着浏览器宽度变化而变化的margin,而使用container-fluid则没有这个margin。而这个margin正是container的作用原理。

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

  1. bootstrap中的.container类定义

    bootstrap中的.container类定义 .container{ padding-right:15px; padding-left:15px; margin-right:auto; margi ...

  2. bootstrap中container和container-fluid的区别

    container和container-fluid 在bootstrap中,两者都是设置文本居中,但是它们还是有很大差别的 container 是随屏幕宽度的变化而变化的,是阶段性变化,有一个随浏览器 ...

  3. ASP.NET MVC中使用Unity Ioc Container

    写在前面 安装Unity 添加服务层 IArticleRepository类型映射 服务注入到控制器 Global.asax初始化 后记 关于Unity的使用可以参照<Unity依赖注入使用详解 ...

  4. MVC中使用Unity Ioc Container

    ASP.NET MVC中使用Unity Ioc Container   写在前面 安装Unity 添加服务层 IArticleRepository类型映射 服务注入到控制器 Global.asax初始 ...

  5. bootstrap中的Tooltips工具提示的使用问题

    在使用bootstrap中的Tooltips时,官方文档中的实例代码若直接放在.container 或 .container-fluid类中时,四个button悬停之后会把button之间的margi ...

  6. 57、Bootstrap中文文档

    给大家介绍一个前端框架让你从此写起前端代码与之先前相比如有神助般的效果拉就是Bootstrap. 一.Bootstrap的下载 Bootstrap,由Twitter的设计师Mark Otto和Jaco ...

  7. 12、Bootstrap中文文档(其它插件分享)

    给大家介绍一个前端框架让你从此写起前端代码与之先前相比如有神助般的效果拉就是Bootstrap. 本片导航: Bootstrap的下载 css样式的使用 JavaScript 效果的引用 其他前端插件 ...

  8. bootstrap中使用日历控件

    在bootstrap中使用日历控件可以参照以下资料: http://www.bootcss.com/p/bootstrap-datetimepicker/index.htm 以下是参照此资料自己做的一 ...

  9. bootstrap中栅格系统的原理

    1.基本结构 Bootstrap采取12列的栅格体系,根据主流设备的尺寸进行分段,每段宽度固定,通过百分比和媒体查询实现响应式布局. Bootstrap划分了四种尺寸:超小屏(手机).小屏(平板竖屏) ...

  10. bootstrap课程5 bootstrap中的组件使用的注意事项是什么

    bootstrap课程5 bootstrap中的组件使用的注意事项是什么 一.总结 一句话总结: 1.img-responsive的作用是什么(其实还是要多看手册)? 看起来像width=100%的效 ...

随机推荐

  1. 总结5条对学习Linux系统有帮助的经验心得

    作为国产手机中的代表厂商,OPPO一直走在国内的前沿.不仅手机出货量在国内遥遥领先,而且在国外也抢占不少的市场份额.前段时间,OPPO在台湾地区签下田馥甄和林宥嘉担任OPPO R9s的代言人外,在东南 ...

  2. maven配置checkstyle插件对代码规范进行静态检查

    checkstyle配置的官方网站:http://checkstyle.sourceforge.net/config.html (1)新建maven项目,配置checkstyle插件 pom.xml ...

  3. 5.2 C++重载操作符的优先级

    参考:http://www.weixueyuan.net/view/6380.html 总结: 重载操作符不能改变操作符的优先级和语法特性. 重载操作符不能改变操作符的优先级和语法特性.例如上一节复数 ...

  4. SQL-20 查找员工编号emp_no为10001其自入职以来的薪水salary涨幅值growth

    题目描述 查找员工编号emp_no为10001其自入职以来的薪水salary涨幅值growthCREATE TABLE `salaries` (`emp_no` int(11) NOT NULL,`s ...

  5. 设计Web程序,计算任意两个整数的和,并在网页上显示结果。要求在javabean中实现数据的求和功能。

    <%--提交页面input.jsp--%> <%@ page language="java" import="java.util.*" pag ...

  6. Web 开发最有用的50款 jQuery 插件集锦——《内容滑块篇》

    http://www.cnblogs.com/lhb25/archive/2013/04/02/50-jquery-plugins-d.html responsive-carousel 是一个内容传送 ...

  7. oracle语句优化

    摘录来自https://blog.csdn.net/sap_jack/article/details/3766703 1.选用适合的Oracle优化器 Oracle的优化器共有3种: a.RULE(基 ...

  8. oracle 12c中种子数据库的隐藏与保护

    Oracle 12c种子数据库(pdbseed)的状态是read only,这是因为Oracle对种子数据库进行了保护,避免遭到破坏.保护好种子数据库的目的,是为了以此为模板,新建pdb数据库. 新的 ...

  9. C++ operator new 重载(两个参数)

    #include <iostream> class A { public: int i; public: void* operator new (size_t a, size_t b) { ...

  10. Allocation-Free Collections

    假设你有一个方法,通过创建临时的List来收集某些数据,并根据这些数据来统计信息,然后销毁这个临时列表.这个方法被经常调用,导致大量内存分配和释放以及增加的内存碎片.此外,所有这些内存管理都需要时间, ...