bootstrap中container类和container-fluid类的区别-低调大师

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

2018-05-23 600

container和container-fluid到底什么区别。

查了很多资料，看到很多人和我有同样的疑问，但是下面的回答一般都是一个是响应式一个宽度是百分百

<!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://yq.aliyun.com/articles/597355

转载内容版权归作者及来源网站所有！

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

Python---20行代码爬取斗鱼平台房间数据（下）

在上一篇中，已经详细的讲解了如何获取数据，接下来是深度处理数据，这里调用xlsxwriter库来制作Excel表格。工具：Python3.6.5，Pycharm 1.模块介绍 XlsxWriter模块具有的功能: 100%兼容Excel的*.xlsx文件，支持Excel2003，Excel2007等版本 (Excel2003-和Excel2007的拓展名为*.xls) 支持所有Excel单元格数据格式单元格合并、批注、自动筛选、丰富多格式字符串等支持工作表JPG、PNG图像，自定义图标内存优化模式支持写入大文件 2.模块安装 pip install xlsxwriter # 在命令行中输入此代码 # 目前最新版本为1.0.0，官网文档介绍支持Python2.5-3.5，但目前使用Python3.6未发生异常模块的具体用法可以参考这两个网站（感谢这两个网站提供解释）：官方xlsxwriter解释CSDN吴芒果：XlsxWriter模块实现Excel操作 3.模块使用 import xlsxwriter workbook = xlsxwriter.Workbook('Demo1....

2018-05-23

604

Java堆和栈的区别和介绍以及JVM的堆和栈一、Java的堆内存和栈内存 Java把内存划分成两种：一种是堆内存，一种是栈内存。堆：主要用于存储实例化的对象，数组。由JVM动态分配内存空间。一个JVM只有一个堆内存，线程是可以共享数据的。栈：主要用于存储局部变量和对象的引用变量，每个线程都会有一个独立的栈空间，所以线程之间是不共享数据的。在函数中定义的一些基本类型的变量和对象的引用变量都在函数的栈内存中分配。当在一段代码块定义一个变量时，Java就在栈中为这个变量分配内存空间，当超过变量的作用域后，Java会自动释放掉为该变量所分配的内存空间，该内存空间可以立即被另作他用。堆内存用来存放由new创建的对象和数组。在堆中分配的内存，由Java虚拟机的自动垃圾回收器来管理。二、栈与堆的共同点和优缺点栈(stack)与堆(heap)都是Java用来在Ram中存放数据的地方。与C++不同，Java自动管理栈和堆，程序员不能直接地设置栈或堆。栈的优势是，存取速度比堆要快，仅次于直接位于CPU中的寄存器。但缺点是，存在栈中的数据大小与生存期必须是确定的，缺乏灵活性。另外，栈数据...

2018-05-24

623

资源下载

更多资源

优质分享App

近一个月的开发和优化，本站点的第一个app全新上线。该app采用极致压缩，本体才4.36MB。系统里面做了大量数据访问、缓存优化。方便用户在手机上查看文章。后续会推出HarmonyOS的适配版本。

Mario

马里奥是站在游戏界顶峰的超人气多面角色。马里奥靠吃蘑菇成长，特征是大鼻子、头戴帽子、身穿背带裤，还留着胡子。与他的双胞胎兄弟路易基一起，长年担任任天堂的招牌角色。

Spring

Spring框架（Spring Framework）是由Rod Johnson于2002年提出的开源Java企业级应用框架，旨在通过使用JavaBean替代传统EJB实现方式降低企业级编程开发的复杂性。该框架基于简单性、可测试性和松耦合性设计理念，提供核心容器、应用上下文、数据访问集成等模块，支持整合Hibernate、Struts等第三方框架，其适用范围不仅限于服务器端开发，绝大多数Java应用均可从中受益。

Rocky Linux

Rocky Linux（中文名：洛基）是由Gregory Kurtzer于2020年12月发起的企业级Linux发行版，作为CentOS稳定版停止维护后与RHEL（Red Hat Enterprise Linux）完全兼容的开源替代方案，由社区拥有并管理，支持x86_64、aarch64等架构。其通过重新编译RHEL源代码提供长期稳定性，采用模块化包装和SELinux安全架构，默认包含GNOME桌面环境及XFS文件系统，支持十年生命周期更新。