布局
Col栅格布局
布局方法
.container
固定尺寸;.container-fluid
宽度拉满。- 每行默认分成12份,例如
col-sm-4
占4份,即1/3。 - 可以用
.w-100
折行<div class="container"> <div class="row"> <div class="col-sm-4">第一列</div> <div class="col-sm-4">第二列</div> <div class="col-sm-4">第三列</div> </div> </div> <div class="container-fluid"> <div class="row"> <div class="col-sm-2">第一列</div> <div class="col-sm-5">第二列</div> <div class="col-sm-3">第三列</div> </div> </div>
对齐方法
-
水平定位
-
justify-content-center, justify-content-end
-
justify-content-around, justify-content-between
-
垂直定位
-
.align-items-center, .align-items-end
-
.align-self-center, .align-self-end
-
排序
.order-3
Flex弹性布局
布局方法
.d-flex flex-row-reverse
水平布局,然后反转.d-flex flex-column
垂直布局
对齐方法
-
.justify-content-center
子元素内容水平居中 (start、end、between、around) -
.align-content-center
子元素内容垂直居中 (start、end、between、around) -
.align-items-center
子元素项目垂直居中 (start、end、baseline、stretch) -
.align-self-center
单项目垂直居中 (start、end、baseline、stretch) -
.flex-fill
子盒子填满剩余 -
.flex-grow-*
0或1,是否填满剩余 -
.flex-shrink-*
0或1,是否强制换行 -
.mr-auto .ml-auto
水平布局时对flex元素进行浮动对齐 -
.mb-auto .mt-auto
垂直布局时对flex元素进行浮动对齐 -
.flex-wrap
设置包裹,内容自动换行 -
.flex-wrap-reverse
反转 -
.order-*
指定顺序