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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/541399.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

centos php fpm 停止_如何关闭php-fpm进程?

因为你是编译的,可以在源码中复制php-fpm的init文件到系统中:cp -f sapi/fpm/init.d.php-fpm /etc/init.d/php-fpm然后就可以使用以下命令启动、停止、重启和重新加载php-fpm了:service php-fpm startservice php-fpm restartservice php-fpm…

minus_Java Duration类| minus()方法与示例

minus持续时间类minus()方法 (Duration Class minus() method) Syntax: 句法: public Duration minus(Duration d);public Duration minus(long amt, TemporalUnit t_unit);minus() method is available in java.time package. minus()方法在java.time包中可用。 m…

Mongodb聚合函数

插入 测试数据 for(var j1;j<3;j){ for(var i1;i<3;i){ var person{Name:"jack"i,Age:i,Address:["henan","wuhan"],Course:[{Name:"shuxue",Score:i},{Name:"wuli",Score:i}]}db.DemoTest.Person.insert(pers…

php rename函数_php rename函数怎么用

PHP rename()函数用于重命名文件或目录&#xff0c;语法“rename(文件旧名称,新名称,句柄环境)”&#xff0c;使用用户指定的新名称更改文件或目录的旧名称&#xff0c;并且可以根据需要在目录之间移动&#xff1b;成功时返回True&#xff0c;失败时返回False。php rename()函数…

Java BigInteger类| xor()方法与示例

BigInteger类的xor()方法 (BigInteger Class xor() method) xor() method is available in java.math package. xor()方法在java.math包中可用。 xor() method is used to perform xor operation between this BigInteger and the given BigInteger and we all know when we pe…

Spring Data Redis实战之提供RedisTemplate

为什么80%的码农都做不了架构师&#xff1f;>>> 参考&#xff1a; http://www.cnblogs.com/edwinchen/p/3816938.html 本项目创建的是Maven项目 一、pom.xml引入dependencies <dependency><groupId>org.springframework.data</groupId><artif…

Java BigInteger类| and()方法与示例

BigInteger类和()方法 (BigInteger Class and() method) and() method is available in java.math package. and()方法在java.math包中可用。 and() method is used to perform and operation between this BigInteger and the given BigInteger (val) [i.e. (this BigInteger)…

php映射,PHP实现路由映射到指定控制器

自定义路由的功能&#xff0c;指定到pathinfo的url上,再次升级之前的脚本SimpleLoader.phpclass SimpleLoader{public static function run($rulesarray()){header("content-type:text/html;charsetutf-8");self::register();self::commandLine();self::router($rule…

stl vector 函数_vector :: clear()函数,以及C ++ STL中的示例

stl vector 函数C vector :: clear()函数 (C vector::clear() function) vector::clear() is a library function of "vector" header, it is used to remove/clear all elements of the vector, it makes the 0 sized vector after removing all elements. vector …

Commonjs规范及Node模块实现

前面的话 Node在实现中并非完全按照CommonJS规范实现&#xff0c;而是对模块规范进行了一定的取舍&#xff0c;同时也增加了少许自身需要的特性。本文将详细介绍NodeJS的模块实现 引入 nodejs是区别于javascript的&#xff0c;在javascript中的顶层对象是window&#xff0c;而在…

thinkphp3 php jwt,ThinkPHP5 使用 JWT 进行加密

- 使用 Composer安装此扩展- 代码示例<?php /*** [InterCommon-接口公用]* Author RainCyan* DateTime 2019-08-12T16:38:080800*/namespace app\hladmin\controller;use think\Controller;use \Firebase\JWT\JWT;class InterCommonController extends Controller {private…

数据管理与商业智能_商业智能与数据科学

数据管理与商业智能In this heavily jargonized trade, the words typically overlap one another, leading to a scarcity of understanding or a state of confusion around these ideas. whereas big data vs analytics or computing vs machine learning vs cognitive inte…

JavaWeb网上图书商城完整项目--day02-14.登录功能的login页面处理

1、现在注册成功之后&#xff0c;我们来到登录页面&#xff0c;登录页面在于 在登录页面。我们也需要向注册页面一样对登录的用户名、密码 验证码等在jsp页面中进行校验&#xff0c;校验我们单独放置一个login.js文件中进行处理&#xff0c;然后login.jsp加载该js文件 我们来看…

php多线程是什么意思,多线程是什么意思

线程是操作系统能够进行运算调度的最小单位&#xff0c;它被包含在进程之中&#xff0c;是进程中的实际运作单位&#xff0c;而多线程就是指从软件或者硬件上实现多个线程并发执行的技术&#xff0c;具有多线程能力的计算机因有硬件支持而能够在同一时间执行多于一个线程&#…

c++一个类创建多个对象_C ++ | 创建一个类的多个对象

c一个类创建多个对象In the below program, we are creating a C program to create multiple objects of a class. 在下面的程序中&#xff0c;我们正在创建一个C 程序来创建一个类的多个对象 。 /* C program to create multiple objects of a class */#include <iostrea…

Activity中与ListActivity中使用listview区别

一.Activity中与ListActivity中使用listview区别&#xff08;本身没多大区别&#xff0c;只是ListActivity在listview的显示上做了一些优化&#xff09;Activity中使用Listview步骤&#xff1a;1.xml布局中,ListView标签id可以任意取值如&#xff1a;<ListView andro…

java相关是什么,什么是java

java基础常见面试题&#xff0c;这是一篇超长的随笔&#xff01;&#xff01;&#xff01;1. Java基础部分....................................................... 4 1、一个".java"源文件中是否可以包括多个类(不是内部类)&#xff1f;有什么限制&#xff1f;.. …

如何在Scala中将Double转换为String?

Double in Scala is a data type that stores numerical values that have decimals. It can store a 64-bit floating point number. Scala中的Double是一种数据类型&#xff0c;用于存储带有小数的数值。 它可以存储一个64位浮点数。 Example: 例&#xff1a; val decimal…

basic knowledge

Position 属性&#xff1a;规定元素的定位类型。即元素脱离文档流的布局&#xff0c;在页面的任意位置显示。 ①absolute &#xff1a;绝对定位&#xff1b;脱离文档流的布局&#xff0c;遗留下来的空间由后面的元素填充。定位的起始位置为最近的父元素(postion不为static)&…

avatar.php uid,phpcms函数库中获取会员头像方法get_memberavatar()有时无效问题

修复方法&#xff1a;首先我先给出无效情况的演示代码&#xff0c;如下&#xff1a;$userid intval($_GET[userid]);$userinfo $this->db->get_one(userid.$userid);$this->db->set_model(10); //原因便在这里$userdetail $this->db->get_one("useri…