我在学4以上的版本的bootstrap 所以：
Bootstrap 4 需要一个容器元素来包裹网站的内容。
我们可以使用以下两个容器类：
但 4.0以后的版本 自适应布局 还是以 移动优先的...
Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多 12 列【最多12列】。
他也是移动优先.
1.他基于12列的布局，5种响应尺寸
2.完全采用flexbox流式布局构建的，完全支持响应式布局
3.具体采用di容器的行、列、和对齐内容来构建响应式布局。
具体：
Bootstrap 4 网格系统有以下 5 个类:
Bootstrap4 网格系统规则:
.container (固定宽度) 或 .container-fluid (全屏宽度) 类的容器中，这样就可以自动设置一些外边距与内边距。例:
<div class="container"> <div class="row"> <div class="col-sm-3">1</div> <div class="col-sm-3">2</div> <div class="col-sm-3">3</div> <div class="col-sm-3">4</div> <div class="col-sm-3">5</div> <!-- 这里就超过了 就会换行 因为 3*4=12 --> </div> </div>
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>网格系统</title> <!-- 新 Bootstrap4 核心 CSS 文件 --> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <style> .col-sm-3{ border: 1px solid rebeccapurple; } </style> </head> <body> <div class="container-fluid"> <!-- 这种模式会占据100%宽 --> <div class="row"> <div class="col-sm-3">1</div> <div class="col-sm-3">2</div> <div class="col-sm-3">3</div> <div class="col-sm-3">4</div> <div class="col-sm-3">5</div> <!-- 这里就超过了 就会换行 因为 3*4=12 --> </div> </div> <!-- jQuery文件。务必在bootstrap.min.js 之前引入 --> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js --> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <!-- 最新的 Bootstrap4 核心 JavaScript 文件 --> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </body> </html>
<div class="container"> <!-- 这种模式会占据100%宽 --> <div class="row"> <div class="col">1</div> <div class="col">2</div> <div class="col">3</div> <div class="col">4</div> <div class="col">5</div> <!-- col是适应全部就不会超行了 会自动计算 --> </div> </div>
自己多去尝试网格类，多实践即可。
2. bootstrap 布局系统的介绍 和 栅格化系统【网格系统】的学习
原文：https://www.cnblogs.com/bi-hu/p/14853751.html