YiDaoJ's Blog

Difference between .container Class and .container-fluid Class in Bootstrap / Bootstrap中.container类和.container-fluid类的区别

Posted on | In |

在学习Bootstrap的过程中可以频繁地在代码中看到.container和.container-fluid的出现，好奇两者到底有什么实质性的区别，写个代码一探之。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title></title>
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <style type="text/css">
    .container {
      background-color: orange;
    }
    .container-fluid {
      background-color: aqua;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>Hello World!<h1>
  </div>
  <div class="container-fluid">
     <h1>Hello World!<h1>
  </div>
       
  <!-- jQuery (Bootstrap JS plugins depend on it) -->
  <script src="js/jquery-2.1.4.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
  <script src="js/script.js"></script>
</body>
</html>

为了能一目了然地看出区别，我分别给两个<div>块添加了不同的背景颜色。

在浏览器中的运行效果如下：

观察开发者工具中两者盒子模型的区别：

首先是含有.container类的<div>元素，该元素左右两侧分别有margin(215px)和padding(15px)。

.container

而含有.contrainer-fluid类的<div>元素，该元素左右两侧只有15px的padding，而margin为0。

.contrainer-fluid

当我拖拽缩小浏览器窗口，如下图所示：

浏览器窗口缩小

此时，含有.container类的<div>元素左右两侧分别的有margin(70px)和padding(15px)，随着浏览器窗口的大小不同，嵌有.contrainer的<div>元素的margin-left和margin-right会发生变化，但padding并不会；也就是说随着浏览器窗口大小的变化，含有.container类的<div>元素也会变化。

.container

而嵌有.container-fluid的<div>元素两侧padding值仍保持不变。

.container-fluid

好的，所以get到了.container的响应式变化。

欢迎交流。

注：此文章为本人原创，转载时烦请必注明出处。