1.栅格系统
Bootstrap是基于移动优先的原则开发的，使用了一系列的媒体查询（media queries）方法，为我们的布局和界面创建自适应的的分界点。这些分界点主要是基于视口宽度的最小值，并且当窗口视图改变的时候允许元素缩放。
(分界点大小：576px、768px、992px、1200px)
Bootstrap包含了一个强大的移动优先的网格系统，它是基于一个12列的布局、有5种响应尺寸(对应不同的屏幕)。Bootstrap4是完全基于flexbox流式布局构建的，完全支持响应式标准。
2.响应式的class选择器
Bootstrap的栅格系统包括五种宽带预定义，用于构建复杂的响应布局，你可以根据需要定义在特小.col、小.col-sm-*、中.col-md-*、大.col-lg-*、特大.col-xl-*五种屏幕(设备)下的样式。
每个标签都是定义了在当前断点之下的排列样式，一旦小于这个断点那么样式就不起作用了，变成了各独自占一行。
类似于sm,md,lg,xl等都是断点，只有当屏幕尺寸大于断点的对应的大小，这样的的class样式才会生效。比如：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Document</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<style>
#box_row div {
line-height: 100px;
text-align: center
}
</style>
</head>
<body>
<div class="container">
<div id="box_row" class="row" style="height: 100px">
<div class="col-xl-4" style="background: #27ff86">
222
</div>
<div class="col-xl-4 " style="background: #8879ff">
222
</div>
<div class="col-xl-4" style="background: #ffc535">
other
</div>
</div>
</div>
</body>
</html>
这里设置了边框，这里其实设置的在超大屏幕下的样式，即当前屏幕的尺寸宽度大于1140px时这个样式才生效，如下：
但是当屏幕的尺寸变小之后，比如缩小到1140px之后，就会自动成为每列一行、水平堆砌。
比如把浏览器窗口的宽度调小到1140px以下，此时显示的效果如下：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-r5Yt3rtr-1597584075252)(https://i.loli.net/2020/08/15/WQK15GClPzsJXEu.png)]
会自适应的进行布局，这是根据当前屏幕尺寸进行自动的调整的也就是说，当屏幕尺寸小于端点值xl时，此时每列就会自动的占一行，水平堆砌。
3.混合布局
<div class="container">
<div id="box_row" class="row" style="height: 100px">
<div class="col-xl-4 col-sm-3" style="background: #27ff86">
222
</div>
<div class="col-xl-4 col-sm-3" style="background: #8879ff">
222
</div>
<div class="col-xl-4 col-sm-3" style="background: #ffc535">
other
</div>
</div>
</div>
这样就设置了两个断点，在超大屏幕下每块占4列，在大屏幕和小屏幕之间是占3列，以下是效果展示图：
-
当屏幕尺寸大于1140px时，
col-xl-4生效： -
当屏幕尺寸小于1140px，大于576px时：
可以看到此时的布局调整到了
col-sm-3下的自适应样式，即每个块占3列 -
混合布局情况下可以对多种设备进行布局调整。
搬运自我的个人博客boostrap栅格系统自适应的布局