Bootstrap的布局容器类container与类container-fluid有什么区别,分别用在什么地方？

昊虹AI笔记

已于 2023-11-17 14:43:26 修改

阅读量1.1k

点赞数

分类专栏： Bootstrap 文章标签： bootstrap 前端 html

于 2023-08-24 19:41:28 首次发布

本文链接：https://blog.csdn.net/wenhao_ir/article/details/132481268

版权

Bootstrap 专栏收录该内容

50 篇文章 4 订阅

订阅专栏

阅读本文前建议先阅读下面两篇博文：
怎么样通过Bootstrap已经编译好(压缩好)的源码去查看符合阅读习惯的源码【通过Source Map(源映射)文件实现】
在CSS中，盒模型中的padding、border、margin是什么意思？

Bootstrap中定义了两个容器类，分别为.container和.container-fluid。

容器是Bootstrap中最基本的布局元素，在使用默认网络系统时是必需的。

container容器和container-fluid容器最大的不同在于宽度的设定。

container容器根据屏幕宽度的不同，利用媒体查询去设定宽度，典型的媒体查询语句如下:

@media (min-width: 576px) {
	.container{
		max-width: 540px;
	}
}

container-fluid容器则保持全屏大小，始终保持100%的宽度。当需要一个元素横跨视口的整个宽度时，可以使用.container-fluid容器类。

以下是Bootstrap的类 container 的一个盒模型实例：
在这里插入图片描述
测试代码百度网盘下载链接：
https://pan.baidu.com/s/1nlr8V0ZxIdA2OYBpZPabEA?pwd=ljwq

以下是Bootstrap的类 container-fluid 的一个盒模型实例：
在这里插入图片描述
测试代码百度网盘下载链接：
https://pan.baidu.com/s/1TXO42BfdHxcqeNBGwjRWtg?pwd=s5jd

从上面的盒模型来看，二者的主要区别就在于在类container中，外边距（Margin）是指定了值的，而在类container-fluid中，外边距（Margin）是没有指定值的。

实际的HTML代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>布局容器</title>
    <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css">
    <script src="jquery-3.5.1.slim.js"></script>
    <script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container border text-center align-middle py-5 bg-light">container容器</div><br/>
<div class="container-fluid border text-center align-middle py-5 bg-light">container-fluid容器</div>
</body>
</html>
</body>
</html>

请问：在上面的代码中为什么要引入两个js脚本，不引入行不行？
答：经实测，上面代码中的两个js脚本是可以不需要的，即不引入是可以的，下面说说引入的两个js脚本的作用。

在上面的代码中，引入了两个 JavaScript 脚本文件：

jquery-3.5.1.slim.js: 这是 jQuery 的一个轻量级版本，通常用于处理与DOM元素交互的操作。Bootstrap的一些功能和组件可能依赖于jQuery，因此你需要引入它，以确保Bootstrap正常工作。
bootstrap-4.5.3-dist/js/bootstrap.min.js: 这是 Bootstrap 的 JavaScript 文件，包含了Bootstrap框架的所有核心功能和组件。这个文件是必需的，因为Bootstrap的许多特性都需要JavaScript来实现，比如导航栏、模态框、滚动监听等等。

如果你不引入这两个 JavaScript 文件，那么在使用Bootstrap的各种组件时可能会遇到问题，因为它们依赖于这些JavaScript文件来运行。所以，为了确保Bootstrap正常工作，往往需要同时引入jQuery和Bootstrap的JavaScript文件。

浏览器中的运行效果如下：
在这里插入图片描述