bootstrap中container类和container-fluid类的区别

近几天才开始系统的学习bootstrap,但马上就遇到了一个‘拦路虎’：container和container-fluid到底什么区别。
查了很多资料，看到很多人和我有同样的疑问，但是下面的回答一般都是一个是响应式一个宽度是百分百，说的好像是那么回事，但是你真的能明白吗？反正我是不能，于是我就去开始自己写demo。
‘container ’demo

<!DOCTYPE html>
<html lang="zh-cn"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Hello World</title> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> </head> <body> <div class="container"> <h3>hello world</h3> </div> <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script> <script type="text/javascript" src="js/bootstrap.min.js"></script> </body> </html>

写完之后打开浏览器，f12后发现container容器不止有15px的padding，还有一个会随着浏览器宽度变化而变化的margin，如图

上图的盒模型为我在满屏时的数值，对浏览器进行缩放会有增加或减少的变化，具体请自己试验，实践出真知嘛。
container-fluid demo
当把类换成container-fluid之后，你会发现页面有明显的变化
，如图

再看盒模型

你会发现这次整个容器就只有固定的15px的padding，并没有再加margin。

结论
container 类和container-fluid类的区别体现在是否有随视口宽度改变的margin存在。
container类所谓的自适应也是通过margin的改变来完成，container-fluid类的百分百宽度是指在固有的15px的padding前提下宽度总是当前视口的宽度。

转载于:https://www.cnblogs.com/nico6/p/9205675.html

bootstrap中container类和container-fluid类的区别相关推荐

Bootstrap中CSS通用样式——排版，列表，代码，图片
一.排版标题: 在Bootstrap4中,主要对标题样式做了如下规定: (1)重设上下外边距,margin-top值为0,margin-bottom:0.5rem. (2)固定所有标题行高为line ...
bootstrap中单个按钮、按钮组、徽章、进度条
单按钮: 背景按钮:bootstrap提供了具有特殊意义背景的按钮样式,使用时只需给自己的按钮(button.input.a)加bootstrap提供的类名即可,其具体如下: 类名描述 .btn 基 ...
在Bootstrap中使用类的按钮类型
Bootstrap has 7 different types of buttons with contextual classes from which we can create buttons ...
Bootstrap——制作个人简历网页、工具类【边框（添加、删除、颜色、圆角）、清除浮动、颜色（文本、链接、背景）、display属性、浮动、定位、文本对齐】
制作个人简历网页代码: <!DOCTYPE html> <html><head><meta charset="UTF-8">< ...
弟中弟的Leetcode总结——数组类（二）
弟中弟的Leetcode总结--数组类(二) 题目描述 Container With Most Water Given n non-negative integers a1, a2, -, an , ...
在 GUI 控件中使用布局和容器: CBOX 类
目录 1. 介绍 2. 目标 3. 类 CBox 3.1. 布局样式 3.2. 计算控件之间的间隔 3.3. 对齐 3.4. 部件渲染 3.5. 部件大小调整 3.6. 递归渲染 4. 在对话框窗口里 ...
【中】JAVA【创建笔记本电脑类】笔记
创建笔记本电脑类(继承一个类,实现多个接口) 创建NetCard接口和USB接口,创建Computer抽象类,然后继承Computer类,实现NetCard接口和USB接口,创建笔记本电脑类Lapto ...
IDEA中根据数据库自动生成实体类，并自定义所生成的实体类中的注解 @Table @Id @...
使用IDEA项目添加Hibernate扩展,生成实体类并配置实体类中的注解一.使用Hibernate自动生成实体类 1.在项目上右键,选择Add Framework Support找到 Hibern ...
CImg库中CImg,CImgList,CImgDisplay三个类的介绍
转自:http://www.cppprog.com/2009/0426/108.html 本文简单介绍了CImg库中的三个大类:CImg,CImgList,CImgDisplay.然后给出了让CImg ...
CSS样式中伪类和伪类元素的区别（css中一个冒号和两个冒号的区别）
首先介绍下什么是伪类,所谓伪类就是: 伪类选择元素基于的是当前元素处于的状态,或者说元素当前所具有的特性,而不是元素的id.class.属性等静态的标志.由于状态是动态变化的,所以一个元素达到一个特 ...

bootstrap中container类和container-fluid类的区别

bootstrap中container类和container-fluid类的区别相关推荐

最新文章

热门文章