使用过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. day30 操作系统介绍 进程的创建

    今日内容 一.操作系统的简单介绍 二,并发与并行 三.同步异步阻塞非阻塞 四.multiprocess模块 1. 操作系统的简单介绍 多道技术(重点) 空间复用: 时间复用: 进程之间是空间隔离的 分 ...

  2. 读书笔记 C# yield return与yield break执行顺序的浅析

    yield return可一次返回一个元素,并保留当前在代码中的位置,下次调用当前迭代器函数时,将从该位置从新执行.也就是说执行了yield return的时候,迭代器函数就返回了一个元素给forea ...

  3. 直接插入排序(Straight Insertion Sort)

    body, table{font-family: 微软雅黑; font-size: 13.5pt} table{border-collapse: collapse; border: solid gra ...

  4. (C/C++学习笔记) 二. 数据类型

    二. 数据类型 ● 数据类型和sizeof关键字(也是一个操作符) ※ 在现代半导体存储器中, 例如在随机存取存储器或闪存中, 位(bit)的两个值可以由存储电容器的两个层级的电荷表示(In mode ...

  5. :适配器模式:Adapter

    #ifndef __ADAPTER_H__ #define __ADAPTER_H__ #include <iostream> using namespace std; class Duc ...

  6. MicroOrm.Dapper.Repositories 的使用

    https://github.com/geffzhang/MicroOrm.Dapper.Repositories 1.特性标记都是要引用: System.ComponentModel.DataAnn ...

  7. Ubuntu 14.04 安装 Xilinx ISE 14.7 全过程(转)

    reference:https://www.cnblogs.com/tracyone/p/3561781.html 按照ISE后,建立ISE启动连接: 这个帖子作为我安装xilinx ISE 14.7 ...

  8. maven 打包前 Junit 测试

    1. 在需要打包前测试的项目中添加依赖 <dependency> <groupId>junit</groupId> <artifactId>junit& ...

  9. day 69-70 一对一 一对多 多对一联表查询

    day 69 orm操作之表关系,多对多,多对一 多对一/一对多, 多对多{类中的定义方法} day69 1. 昨日内容回顾 1. 单表增删改查 2. 单表查询API 返回QuerySet对象的: 1 ...

  10. wxPython的使用--类似画板的界面

    # -*- coding: utf-8 -*-import wximport wx.lib.buttonsimport cPickleimport os class PaintWindow(wx.Wi ...