网格系统的优先级
下表总结了 Bootstrap 网格系统如何在不同设备上工作的：
| 超小设备 <576px | 平板 ≥576px | 桌面显示器 ≥768px | 大桌面显示器 ≥992px | 超大桌面显示器 ≥1200px | |
|---|---|---|---|---|---|
| 容器最大宽度 | None (auto) | 540px | 720px | 960px | 1140px |
| 类前缀 | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
| 列数量和 | 12 | ||||
| 间隙宽度 | 30px （一个列的每边分别 15px） | ||||
| 可嵌套 | Yes | ||||
| 列排序 | Yes | ||||
以下各个类可以一起使用，从而创建更灵活的页面布局。
这个意思就是说
1.如果用两个以上的类前缀来定义，那么如表可知 会优先使用移动的 ，你可以谷歌哪里有个小手机 自己拖一下
2.可以使用两个或以上的类前缀来定义【混合布局】 ，但会按照像素自动调整 实现响应式布局
3.使用w-100可以切割网格系统的网格，进行分区操作
4.如果强制设置了 col-3，那么切割的时候，将不会自动填充【会换行】
5.注意： 如果类前缀不指定 格子的话！ 如果挤不下了才会换行 那时候就不一定是12格了 即： 【挤不下去才换行！！！！】
例：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>网格系统</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <style> /* CSS 样式 */ .temp{ border: 1px solid red; } </style> </head> <body> <div class="container"> <div class="row"> <!-- 这里按照机器宽度来调整格子 因为从小到大 所以移动肯定优先的 --> <div class="temp col-4 col-sm-2 col-md-5 col-lg-6 col-xl-12">第一列</div> <div class="temp col-3 col-sm-3 col-md-2 col-lg-6 col-xl-12">第二列</div> <div class="temp col-5 col-sm-7 col-md-5 col-lg-12 col-xl-12">第三列</div> </div> <div class="container"> <div class="row"> <div class="temp col">一</div> <div class="temp col">二</div> <div class="w-100"></div> <!-- 对半切割 因为这里的col没指定格子 所以不填充切割 --> <div class="temp col">三</div> <div class="temp col">四</div> </div> </div> <div class="container"> <div class="row"> <div class="temp col-3">一</div> <div class="temp col-3">二</div> <div class="w-100"></div> <!-- 对半切割 因为这里的col没指定3格子 所以对半不填充切割 tips： 如果不是3 会不填充切割 但不是对半的，因为一半12/2=6 --> <div class="temp col-3">三</div> <div class="temp col-3">四</div> </div> </div> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </body> </html>
偏移列
偏移列通过 offset-*-* 类来设置。第一个星号( * )可以是 sm、md、lg、xl，表示屏幕设备类型，第二个星号( * )可以是 1 到 11 的数字。
为了在大屏幕显示器上使用偏移，请使用 .offset-md-* 类。这些类会把一个列的左外边距（margin）增加 * 列，其中 * 范围是从 1 到 11。
例如：.offset-md-4 是把.col-md-4 往右移了四列格。
实例
<!DOCTYPE html> <html> <head> <title>Bootstrap 实例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container-fluid"> <h1>偏移列</h1> <p>.offset-md-4 是把.col-md-4 往右移了四列格。</p> <div class="container-fluid"> <div class="row"> <div class="col-md-4 bg-success">.col-md-4</div> <div class="col-md-4 offset-md-4 bg-warning">.col-md-4 .offset-md-4</div> </div> <div class="row"> <div class="col-md-3 offset-md-3 bg-success">.col-md-3 .offset-md-3</div> <div class="col-md-3 offset-md-3 bg-warning">.col-md-3 .offset-md-3</div> </div> <div class="row"> <div class="col-md-6 offset-md-3 bg-success">.col-md-6 .offset-md-3</div> </div> </div> </div> </body> </html>