简述container与container-fluid的区别

在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的作用原理。

简述container与container-fluid的区别相关推荐

简述面向对象中__new__和__init__区别，这道题朝简单！
简述面向对象中__new__和__init__区别使用Python写过面向对象的代码的同学,可能对 __init__ 方法已经非常熟悉了,__init__ 方法通常用在初始化一个类实例的时候.例如: ...
Docker - Docker Container及Container命令详解
Docker - Docker Container及Container命令详解什么是Docker容器(Docker Container) 上一篇博客介绍了Docker镜像(Docker Image) ...
微型计算机的体积虽小但是性价比比较高,[问答题,简答题] 简述公共管理与企业管理的区别。...
[问答题,简答题] 简述公共管理与企业管理的区别. 更多相关问题 [单选题]6.1-2下列变更中属于其他变更的是( ). A. 变更工程质量标准 B. 更改有关部分的标高 C. 增减合同中约定的工程量 ...
说一说windows原生docker及windows Server Container , Hyper Container 之间的关系（学习总结）...
前一段时间学习netcore的时候解除到了docker,感觉真是不错的技术.百度了不少教程.因为我用windows就下载安装了一下试试.但是没有安装成功,才发现需要安装virtualbox虚拟机,与 ...
Error running docker container: starting container process caused “exec: \“python\“: executable file
问题:miniconda3虚拟环境创建python环境,使用下面Dockerfile编译docker镜像 FROM cuda10.2_pt1.5:09061 COPY . /workspace WOR ...
【快速入门系列】简述 for...in 和 for...of 区别
引言在对数组或对象进行遍历时,我们经常会使用到两种方法:for...in 和 for...of,那么这两种方法之间的区别是什么呢?让我们来研究研究. 一.for...in 首先我们看下MDN对for ...
简述WebService与.NET Remoting的区别及适应场合
为了能清楚地描述Web Service 和Remoting之间的区别,我打算从他们的体系结构上来说起: Web Service大体上分为5个层次: 1. Http传输信道 2. XML的数据格式 3. ...
简述线性和非线性电路及其区别
电气设备是在线性和非线性组件的帮助下构建的.要了解这些器件的基本设计,需要对线性电路和非线性电路有基本的了解.在本文中,小编简单介绍什么是线性和非线性电路及其区别,线性和非线性电路的元素,并解释了一些 ...
java 简述类变量和实例变量的区别
类变量也叫静态变量,也就是在变量前加了static 的变量: 实例变量也叫对象变量,即没加static 的变量: 类变量和实例变量的区别在于:类变量是所有对象共有,其中一个对象将它值改变,其他对象得到 ...
什么是超融合技术？简述主流超融合技术及其区别
1.超融合技术是指在同一套单元设备(x86服务器)中不仅仅具备计算.网络.存储和服务器虚拟化等资源和技术,而且还包括缓存加速.重复数据删除.在线数据压缩.备份软件.快照技术等元素,而多节点可以通过网络 ...

简述container与container-fluid的区别

在bootstrap中的布局容器一栏中，提供了container与container-fluid两种容器，其官方解释为：

所以，先说一说它们的共同点：这两种容器的高度设定都是一致的，都为auto。而他们的不同就在于它们宽度的设定上。

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

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

简述container与container-fluid的区别相关推荐

最新文章

热门文章