container和container-fluid

在bootstrap中，两者都是设置文本居中，但是它们还是有很大差别的

container

是随屏幕宽度的变化而变化的，是阶段性变化，有一个随浏览器变化而变化的margin，总结就是：

如果屏幕小于768的话，最大宽度是自动的(满屏)

如果屏幕大于768小于992的话，最大宽度是750

如果屏幕大于992小于1200的话，最大宽度是970

如果屏幕大于1200，最大宽度是1170

container-fluid

始终保持100%的宽度，margin=0，这个margin正是container的作用原理

bootstrap中container和container-fluid的区别的更多相关文章

  1. bootstrap3中container与container_fluid容器的区别

    声明:转自 CSDN博客 .container与.container_fluid是bootstrap中的两种不同类型的外层容器,按照官方的说法,这两者的区别是: .container 类用于固定宽度并 ...

  2. bootstrap中的.container类定义

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

  3. Bootstrap学习记录-2.container和table

    1. Container Bootstrap中容器类提供了2个类标识:container.container-fluid. 两者的区别在于: container:容器不止有15px的padding,还 ...

  4. ssh远程连接docker中的 linux container

    ssh远程连接docker中的container   由于工作需要,要远程连接Container,本地机器是windows,以下为解决步骤: 1. 环境 本地:Windows ↓ Docker版本1. ...

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

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

  6. jQuery中的bind() live() delegate()之间区别分析

    jQuery中的bind() live() delegate()之间区别分析 首先,你得要了解我们的事件冒泡(事件传播)的概念,我先看一张图 1.bind方式 $('a').bind('click', ...

  7. jsp中的contentType与pageEncoding的区别和作用

    jsp中的contentType与pageEncoding的区别和作用   <%@ page contentType="text/html; charset=utf-8" p ...

  8. 57、Bootstrap中文文档

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

  9. bootstrap 自适应和响应式布局的区别

    自适应:  不管屏幕多大,都尽量不换行,而只是横向缩放. 响应式: 屏幕变小了之后,属于同一行的元素受到挤压后,行的右边元素自动换行显式: 屏幕大了后,本属于同一行的元素尽可能的排在同一行内: boo ...

随机推荐

  1. 启动php-fpm和nginx

    /usr/local/php/sbin/php-fpm #手动打补丁的启动方式/usr/local/php/sbin/php-fpm start sudo /usr/local/nginx/nginx ...

  2. Service5

    DHCP概述及原理• Dynamic Host Configuration Protocol  – 动态主机配置协议,由 IETF(Internet 网络工程师任务小组)组织制定,用来简化主机地址分配 ...

  3. noip历年试题

      noip2018 铺设道路 货币系统 赛道修建 一眼贪心.随便实现. 旅行 环套树枚举删除环上哪条边. 填数游戏 找规律,这谁会啊. 保卫王国 动态Dp,去问这位神仙.   noip2017 小凯 ...

  4. Ext 可编辑的GridPanel

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. Spring源码剖析4：懒加载的单例Bean获取过程分析

    本文转自五月的仓颉 https://www.cnblogs.com/xrq730 本系列文章将整理到我在GitHub上的<Java面试指南>仓库,更多精彩内容请到我的仓库里查看 https ...

  6. 2018—2019—2 20165239《网络对抗技术》Exp7 网络欺诈防范

    一.原理与实践说明 1.实践目标 本实践的目标是:理解常用网络欺诈背后的原理,以提高防范意识,并提出具体防范方法. 2.实践内容概述 简单应用SET工具建立冒名网站 (1分) ettercap DNS ...

  7. Android API Levels 详解

    Android API Levels 当你开发你的Android应用程序时,了解该平台API变更管理的基本方法和概念是很有帮助的.同样的,知道API级别标识以及该标识如何保障你的应用与实际硬件设备相兼 ...

  8. c go数据类型对应关系

    DataType C cgo sizeof--------------------+--------------------+------------------------------------- ...

  9. java.io.IOException: Could not find resource SqlMapConfig.xml

    java.io.IOException: Could not find resource SqlMapConfig.xml 创建mybatis工程时遇到的问题 问题的来源:当我们在项目中和src同级的 ...

  10. springMvc请求路径解析

    一开始我的代码是: //index.jsp<%@ page contentType="text/html;charset=UTF-8" language="java ...