简述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…

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()函数…

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…

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…

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…

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

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

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

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

Activity中与ListActivity中使用listview区别

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

basic knowledge

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

python爬虫之scrapy框架

Scrapy是一个为了爬取网站数据&#xff0c;提取结构性数据而编写的应用框架。 其可以应用在数据挖掘&#xff0c;信息处理或存储历史数据等一系列的程序中。其最初是为了页面抓取 (更确切来说, 网络抓取 )所设计的&#xff0c; 也可以应用在获取API所返回的数据(例如 Amazon As…

Linux学习第三步(Centos7安装mysql5.7数据库)

版本&#xff1a;mysql-5.7.16-1.el7.x86_64.rpm-bundle.tar 前言&#xff1a;在linux下安装mysql不如windows下面那么简单&#xff0c;但是也不是很难。本文向大家讲解了如何在Centos7下如何安装mysql5.7版本,如果有什么问题和错误的地方&#xff0c;欢迎大家指出。 注释&…

linux oracle删除恢复数据恢复,Linux下Oracle误删除数据文件恢复操作

检查数据文件的位置如下&#xff1a;SQL> select name from v$datafile;NAME--------------------------------------------------------------------------------/u01/app/Oracle/oradata/marven/system01.dbf/u01/app/oracle/oradata/marven/undotbs1.dbf/u01/app/oracle/…

数据库如何处理数据库太大_网络数据库中的数据处理

数据库如何处理数据库太大Before learning the data manipulation in a network model, we are discussing data manipulation language, so what is the data manipulation language? 在学习网络模型中的数据操作之前&#xff0c;我们正在讨论数据操作语言&#xff0c;那么什…

oracle12537错误,ORA-12537:TNS:connection closed错误处理方法

1.ORA-12537:TNS:connection closed错误处理过程检查监听正常&#xff0c;Oracle服务也是正常启动的&#xff0c;但是登录不进去。2.解决方案1. cd $ORACLE_HOME/bin/ 进入bin目录2. ll oracle-rwxrwxrwx. 1 ora12 dba 323762222 6?. 14 19:12 oracle3.chmod 6571 oracle 更改…

操作系统中的死锁_操作系统中的死锁介绍

操作系统中的死锁1.1究竟什么是僵局&#xff1f; (1.1 What exactly is a deadlock?) In a multiprogramming environment, there may be several processes with a finite number of resources. A process may request another resource while still holding some of the oth…

centos配置ipv6地址

首先打开网站注册一个账号&#xff1a;http://www.tunnelbroker.net创建一个ipv6的地址&#xff1a;把下面的命令在linux上执行一遍&#xff0c;这个方式是临时生效&#xff0c;重启网卡和重启系统自动失效。把上面的命令保存到一个配置文件中&#xff1a;vi /etc/sysconfig/ne…

NFS部署及优化(一)

NFS部署及优化&#xff08;一&#xff09;一、NFS的基本概念NFS network file system 网络文件系统必然通过网络通信来实现文件的访问和写入&#xff0c;所以做这个实验的话最好有两台虚拟机配置:A&#xff1a;一个192.169.50.201为server端B&#xff1a;一个192.169.50.200为…

HDU 4923 Room and Moor(瞎搞题)

瞎搞题啊。找出1 1 0 0这样的序列&#xff0c;然后存起来&#xff0c;这样的情况下最好的选择是1的个数除以这段的总和。然后从前向后扫一遍。变扫边进行合并。每次合并。合并的是他的前驱。这样到最后从t-1找出的那条链就是最后满足条件的数的大小。Room and Moor Time Limit:…