4栅格系统2（重要）

css样式：

<style>
    body{
        padding-bottom: 1000px;
    }
    .row div{
        height: 100px;
        background: green;
        border: 1px solid #000;
        color: #fff;
    }
    .v-align{
        height: 100px;
        background: rgba(255,0,0,0.1);
        margin: 10px -15px;
    }
    .v-align div{
        height: 40px;
        line-height: 40px;
        background: rgba(86, 61, 124, 0.15);
        border: 1px solid rgba(86, 61, 124, 0.2);
        color: #333;
    }
</style>

1.设置一个列宽，剩下的自动平分

<div class="row mt-5">
    <div class="col-sm-7">在小屏幕下占7列</div>
    <div class="col">自动平分剩余的宽度</div>
    <div class="col">自动平分剩余的宽度</div>
    <div class="col">自动平分剩余的宽度</div>
</div>

2.设置根据内容调整列的宽度，使用.col-{breakpoint}-auto

<!-- breakpoint：响应层 -->
<div class="row mt-5">
    <div class="col-md-auto">在中等屏幕下由内容撑开宽度</div>
    <div class="col">自动平分剩余的宽度</div>
    <div class="col-lg-2">在大屏下占2列</div>
</div>

3.设置所有尺寸下，都占同样的列数。

<!-- 使用.col-* -->
<div class="row mt-5">
    <div class="col-8">所有尺寸下都占8列</div>
    <div class="col-4">所有尺寸下都占4列</div>
</div>

4.混合排列或者组合模式

1、超大屏幕下一行显示6个div,一个div应该占2列
2、大屏幕下一行显示4个div,一个div应该占3列
3、中等屏幕下一行显示3个div,一个div应该占4列
4、小屏幕下一行显示2个div,一个div应该占6列
5、超小屏幕下一行显示1个div,一个div应该占12列

例：

<div class="row mt-5">
<div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-12">超大屏6个，大屏4个，中等屏3个，小屏2个，超小屏1个</div>
<div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-12">超大屏6个，大屏4个，中等屏3个，小屏2个，超小屏1个</div>
<div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-12">超大屏6个，大屏4个，中等屏3个，小屏2个，超小屏1个</div>
<div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-12">超大屏6个，大屏4个，中等屏3个，小屏2个，超小屏1个</div>
<div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-12">超大屏6个，大屏4个，中等屏3个，小屏2个，超小屏1个</div>
<div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-12">超大屏6个，大屏4个，中等屏3个，小屏2个，超小屏1个</div>
</div>

5.对齐：

垂直对齐
1、行的对齐方式
    align-items-start   顶对齐
    align-items-center  中间对齐
    align-items-end     底对齐
2、列的单独对齐方式
    align-self-start    顶对齐
    align-self-center   中间对齐
    align-self-end      底对齐

例：

<div class="row v-align align-items-start">
    <div class="col">垂直对齐-顶部对齐-行的对齐方式</div>
    <div class="col">垂直对齐-顶部对齐-行的对齐方式</div>
    <div class="col">垂直对齐-顶部对齐-行的对齐方式</div>
</div>
<div class="row v-align align-items-center">
    <div class="col">垂直对齐-中间对齐-行的对齐方式</div>
    <div class="col">垂直对齐-中间对齐-行的对齐方式</div>
    <div class="col">垂直对齐-中间对齐-行的对齐方式</div>
</div>
<div class="row v-align align-items-end">
    <div class="col">垂直对齐-底对齐-行的对齐方式</div>
    <div class="col">垂直对齐-底对齐-行的对齐方式</div>
    <div class="col">垂直对齐-底对齐-行的对齐方式</div>
</div>
<div class="row v-align">
    <div class="col align-self-start">垂直对齐-顶对齐-列的对齐方式</div>
    <div class="col align-self-center">垂直对齐-中间对齐-列的对齐方式</div>
    <div class="col align-self-end">垂直对齐-底对齐-列的对齐方式</div>
</div>

水平对齐：

1、justify-content-start 左对齐
2、justify-content-center    居中对齐
3、justify-content-end       右对齐
4、justify-content-around    分散居中对齐（每个元素两侧的间距是相等的）
5、justify-content-between   左右两端对齐（元素之间的间距是自动平分的）

例：

<div class="row v-align justify-content-start">
    <div class="col-4">水平对齐-左对齐</div>
    <div class="col-4">水平对齐-左对齐</div>
</div>
<div class="row v-align justify-content-center">
    <div class="col-4">水平对齐-居中对齐</div>
    <div class="col-4">水平对齐-居中对齐</div>
</div>
<div class="row v-align justify-content-end">
    <div class="col-4">水平对齐-右对齐</div>
    <div class="col-4">水平对齐-右对齐</div>
</div>
<div class="row v-align justify-content-around">
    <div class="col-4">水平对齐-分散居中对齐</div>
    <div class="col-4">水平对齐-分散居中对齐</div>
</div>
<div class="row v-align justify-content-between">
    <div class="col-4">水平对齐-左右两端对齐</div>
    <div class="col-4">水平对齐-左右两端对齐</div>
</div>

6.列排序，使用.order-{breakpoint}-*

3.x的版本使用的是.col-{breakpoint}-push- .col-{breakpoint}-pull-来排序

<div class="row mt-5">
    <div class="col">第1列</div>
    <div class="col order-5">第2列</div>
    <div class="col order-6">第3列</div>
</div>
<div class="row mt-5">
    <div class="col">第1列</div>
    <div class="col order-xl-5">第2列</div>   <!-- 只有当屏幕尺寸>=1200的时候，才会进行排序 数小排前面-->
    <div class="col order-xl-2">第3列</div>
</div>
<div class="row mt-5">
    <div class="col">第1列</div>
    <div class="col order-first">第2列</div>  <!-- order-first代表排在第1位，order-last代表排在最后一位 -->
    <div class="col order-last">第3列</div>
    <div class="col">第4列</div>
</div>

7.列偏移，使用offset-{breakpoint}-*

<div class="row mt-5">
    <div class="col-md-4">第1列</div>
    <div class="col-md-4 offset-md-4">往右偏移4列</div>
</div>
<div class="row mt-5">
    <div class="col-3 offset-md-3">第1列</div><!-- 第一列偏移，那么第二列也会跟着自动偏移 -->
    <div class="col-3 offset-md-3">第2列</div>
</div>
<div class="row mt-5">
    <div class="col-sm-5 col-md-6">小屏占5列，中屏占6列</div>
    <div class="col-sm-5 offset-sm-3 col-md-6 offset-md-5">小屏偏移3列，中屏偏移5列</div>
</div>

8.间距 使用margin工具可以让列之间产生间距

mr-{breakpoint}-auto    使右侧的列远离到最右边<br />    ml-{breakpoint}-auto    使左侧的列远离到最左边<br />![image.png](https://cdn.nlark.com/yuque/0/2020/png/2533347/1609164947266-4320c333-402a-46e7-a7b1-66d12b80de3d.png#height=278&id=WAFNp&margin=%5Bobject%20Object%5D&name=image.png&originHeight=556&originWidth=1508&originalType=binary&ratio=1&size=31750&status=done&style=none&width=754)

<div class="row mt-5">
    <div class="col-md-4">第1列</div>
    <div class="col-md-4 ml-auto">第2列，跑到最右边</div>
</div>
<div class="row mt-5">
    <div class="col-md-3 ml-md-auto">在中屏下，离左边距离自动计算</div>
    <div class="col-md-3 ml-md-auto">在中屏下，离左边距离自动计算</div><!-- 第二个盒子也会自动走 -->
</div>
<div class="row mt-5">
    <div class="col-auto mr-auto">宽度由内容撑开</div>
    <div class="col-auto">宽度由内容撑开</div>
</div>

9.嵌套 每一个列里面可以再继续放行，那嵌套里面的元素就会以父级的宽度为基准，再分12个列

<div class="row mt-5">
    <div class="col-sm-9" style="height: 150px;background: grey;">
        父级的第1列
        <div class="row">
            <div class="col-sm-8 col-6">子级的第1列，小屏下占8列，超小屏下占6列</div><!-- 以父级的宽度为基准，分十二个列 -->
            <div class="col-sm-4 col-6">子级的第2列，小屏下占4列，超小屏下占6列</div>
        </div>
    </div>
    <div class="col-sm-3" style="height: 150px;background: pink;">父级的第2列</div>
</div>