看图：
看例子： 注释有些是这里没得 认真看注释即可！
<!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>
原文：https://www.cnblogs.com/bi-hu/p/14855187.html