下表总结了 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，那么切割的时候，将不会自动填充【会换行】
例：
<!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>
原文：https://www.cnblogs.com/bi-hu/p/14853898.html