看图：
看例子： 注释有些是这里没得 认真看注释即可！
<!doctype html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<title>Document</title>
<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>
<style>
.row { /*高是100px*/
border: solid red;
height: 100px;
}
.ca { /* 格子的高是30px*/
border: 1px blue solid;
height: 30px;
}
</style>
</head>
<body>
<div class="container">
<!-- 普通 默认是行 居顶（align-items-start）-->
<div class="row">
<div class="ca col-sm ">1列</div>
<div class="ca col-sm">2列</div>
<div class="ca col-sm">3列</div>
</div>
<br>
<!--行居中-->
<div class="row align-items-center">
<div class="ca col-sm ">1列</div>
<div class="ca col-sm">2列</div>
<div class="ca col-sm">3列</div>
</div>
<br>
<!--行居底-->
<div class="row align-items-end">
<div class="ca col-sm ">1列</div>
<div class="ca col-sm">2列</div>
<div class="ca col-sm">3列</div>
</div>
<br>
<!-- -------------------------------------------------------------- -->
<!-- 普通 默认是列 居顶（align-self-start）-->
<br>
<div class="row">
<div class="ca col-sm ">1列</div>
<div class="ca col-sm">2列</div>
<div class="ca col-sm">3列</div>
</div>
<!-- 三种列 默认是居顶 下面是否全部：（align-self-xxx）-->
<br>
<div class="row">
<div class="ca col-sm align-self-start">1列</div>
<div class="ca col-sm align-self-center">2列</div>
<div class="ca col-sm align-self-end">3列</div>
</div>
<!-- -------------------------------------------------------------- -->
<br>
<br>
<!-- 未满100%填充时 可以用 justify-content-* 指定对齐方式 -->
<div class="row justify-content-start"> <!-- 这里 1+2+3=6 未满12 默认是左对齐 -->
<div class="ca col-sm-1 ">1列</div>
<div class="ca col-sm-2 ">2列</div>
<div class="ca col-sm-3 ">3列</div>
</div>
<br>
<div class="row justify-content-center"> <!-- 这里 1+2+3=6 未满12 此处居中 -->
<div class="ca col-sm-1 ">1列</div>
<div class="ca col-sm-2 ">2列</div>
<div class="ca col-sm-3 ">3列</div>
</div>
<br>
<div class="row justify-content-end"> <!-- 这里 1+2+3=6 未满12 此处右对齐 -->
<div class="ca col-sm-1 ">1列</div>
<div class="ca col-sm-2 ">2列</div>
<div class="ca col-sm-3 ">3列</div>
</div>
<br>
<div class="row justify-content-around"> <!-- 这里 1+2+3=6 未满12 此处间隔相等 -->
<div class="ca col-sm-1 ">1列</div>
<div class="ca col-sm-2 ">2列</div>
<div class="ca col-sm-3 ">3列</div>
</div>
<br>
<div class="row justify-content-between"> <!-- 这里 1+2+3=6 未满12 此处两端对齐 -->
<div class="ca col-sm-1 ">1列</div>
<div class="ca col-sm-2 ">2列</div>
<div class="ca col-sm-3 ">3列</div>
</div>
<br>
<!-- -------------------------------------------------------------- -->
<!-- 栅格列可以排序 用 .order-N N的值最大为12 因为只有12列
注意！ 不指定排序的话 默认是最大的！ 一定要记得！
-->
<div class="row justify-content-center"> <!-- 这里把第一和第三列位置调换 -->
<div class="ca col-sm-1 order-3">1列</div>
<div class="ca col-sm-2 order-1">2列</div>
<div class="ca col-sm-3 order-0">3列</div>
</div>
<br>
<div class="row justify-content-center"> <!-- 这里强制排序 第一 和 最后 -->
<div class="ca col-sm-1 order-last">1列</div>
<div class="ca col-sm-2 order-">2列</div>
<div class="ca col-sm-3 order-first">3列</div>
</div>
<br>
<!-- -------------------------------------------------------------- -->
<!-- 可以用offset-N 或 offset-*-N 设置列的偏移量，N表示栅格列数 意思就是隔空几个格子-->
<br>
<div class="row"> <!-- 这里用offset-N 设置偏移量 -->
<div class="ca col-sm-1 offset-1">1列</div>
<div class="ca col-sm-2 offset-2">2列</div>
<div class="ca col-sm-3 offset-3">3列</div>
</div>
<br>
<!-- -------------------------------------------------------------- -->
<!-- 可以用.ml-N 和 .mr-N 来微调列距离，ml调前(左)的距离 mr 调后(右) 的距离：
但是最高是 5
-->
<div class="row"> <!-- 这里用ml-N 设置距离量 -->
<div class="ca col-sm-1 ml-1">1列</div>
<div class="ca col-sm-2 ml-5">2列</div>
<div class="ca col-sm-3 ml-1">3列</div>
</div>
<br>
<div class="row"> <!-- 这里用ml-N 设置距离量 -->
<div class="ca col-sm-1 mr-1">1列</div>
<div class="ca col-sm-2 mr-3">2列</div>
<div class="ca col-sm-3 mr-1">3列</div>
</div>
<br>
<!-- -------------------------------------------------------------- -->
<!-- 可以用.ml-auto 和 .mr-auto 来左右对齐，ml调前(左) 、 mr 调后(右)：
没什么软用 貌似...
-->
<div class="row"> <!-- 这里用ml-auto 设置左边距对齐 -->
<div class="ca col-sm-1 ml-auto">1列</div>
<div class="ca col-sm-2 ml-auto">2列</div>
<div class="ca col-sm-3 ml-auto">3列</div>
</div>
<br>
<div class="row"> <!-- 这里用mr-auto 设置右边距对齐 -->
<div class="ca col-sm-1 mr-auto">1列</div>
<div class="ca col-sm-2 mr-auto">2列</div>
<div class="ca col-sm-3 mr-auto">3列</div>
</div>
</div>
</body>
</html>
