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

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

2018-05-23 580

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

582

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

2018-05-24

598

资源下载

更多资源

腾讯云软件源

为解决软件依赖安装时官方源访问速度慢的问题，腾讯云为一些软件搭建了缓存服务。您可以通过使用腾讯云软件源站来提升依赖包的安装速度。为了方便用户自由搭建服务架构，目前腾讯云软件源站支持公网访问和内网访问。

Nacos

Nacos /nɑ:kəʊs/ 是 Dynamic Naming and Configuration Service 的首字母简称，一个易于构建 AI Agent 应用的动态服务发现、配置管理和AI智能体管理平台。Nacos 致力于帮助您发现、配置和管理微服务及AI智能体应用。Nacos 提供了一组简单易用的特性集，帮助您快速实现动态服务发现、服务配置、服务元数据、流量管理。Nacos 帮助您更敏捷和容易地构建、交付和管理微服务平台。

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文件系统，支持十年生命周期更新。