设置一个列宽，剩下的自动平分
<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>
设置根据内容调整列的宽度，使用.col-{breakpoint}-auto
<div class="row mt-5"><div class="col-md-auto">在中等屏幕下由内容撑开宽度</div><div class="col">自动平分剩余的宽度</div><div class="col-lg-2">在大屏下占2列</div></div>
设置所有尺寸下，都占同样的列数。使用.col-*
<div class="row mt-5"><div class="col-8">所有尺寸下都占8列</div><div class="col-4">所有尺寸下都占4列</div></div>
混合排列或者组合模式
<!--混合排列或者组合模式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
对齐方式
侧轴方向对齐
由于此处是bootstrapv4.3的版本， v4.x的版本使用的是flex布局所以flex的对齐方式也可以是使用
注意：bootstrapv3.x的版本使用的float的布局
此处的主轴默认为水平轴，故侧轴为交叉轴（垂直方向的轴）
<!--垂直对齐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>
列排序
列排序使用的是.order-{breakpoint}-
注意：3.x的版本使用的是.col-{breakpoint}-push- .col-{breakpoint}-pull-*来排序
列排序，使用.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>
列偏移
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>
间距
使用margin可以让其列之间产生间距
mr-{breakpoint}-auto 使右侧的列远离到最右边
ml-{breakpoint}-auto 使左侧的列远离到最左边
<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>
嵌套
每一列里面可以继续嵌套行，那嵌套里面的行会以父级元素为基准，再分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>
若有收获，就点个赞吧
0 人点赞
