使用过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. webpack分离打包css和less

    github仓库:https://github.com/llcMite/webpack.git 为什么要分离打包?       答:刚开始学webpack的时候就很郁闷,明明没几个文件,打包出来体积特 ...

  2. 每天CSS学习之text-overflow

    text-overflow是CSS3的一个属性,其作用是当文本溢出包含它的元素时,应该裁剪还是将多余的字符用省略号来表示. 该属性一般和overflow:hidden属性一起使用. text-over ...

  3. HTML--思维导图

    HTML--思维导图

  4. :装饰者模式--Beverage

    #ifndef __BEVERAGE_H__ #define __BEVERAGE_H__ #include <string> using namespace std; class Bev ...

  5. VCL界面控件DevExpress VCL Controls发布v18.2.4|附下载

    DevExpress VCL Controls是 Devexpress公司旗下最老牌的用户界面套包.所包含的控件有:数据录入,图表,数据分析,导航,布局,网格,日程管理,样式,打印和工作流等,让您快速 ...

  6. js重写trim()方法

    最近项目中出现去空格的需求,我本地是IE11,使用trim()函数的时候,是无法识别的.因此重写String的trim()方法. 1.要求 可以去除首位全角,半角空格. 2.对   能去除所有 Str ...

  7. Oracle存储过程基础

    http://blog.sina.com.cn/s/blog_67e424340100iyg1.html

  8. Linux 安装最新版本python3

    新安装了Linux系统(CentOS 6),发现已安装的python版本是2.6. 在网上搜索研究之后总结了一下怎么在保留python2的同时安装最新版的python3. 1. 查看 Python 的 ...

  9. libusb 终于搞好了

  10. 在 子 iframe中 点击一个按钮, 变换 这个 iframe的地址url.

    //跳到测试结果: function jump() { console.log(self.parent.document.getElementById("iframe").src) ...