列(Columns)

admin

一.Vertical alignment(垂直对齐)
1.align-items
#直接使用flex中的align-items
<div class="row align-items-start"></div>
<div class="row align-items-center"></div>
<div class="row align-items-end"></div>

2.align-self
#直接使用flex中的align-self
<div class="col align-self-start">
<div class="col align-self-center">
<div class="col align-self-end">

二.Horizontal alignment(水平对齐)
1.justify-content
#直接使用flex中的justify-content
<div class="row justify-content-start">
<div class="row justify-content-center">
<div class="row justify-content-end">

<div class="row justify-content-around">
<div class="row justify-content-between">
<div class="row justify-content-evenly">

三.Column wrapping(列换行)
<div class="col-9">.col-9</div>
<div class="col-4">.col-9</div>
<div class="col-6">.col-9</div>

四.Column breaks(列中断)
<div class="w-100"></div>

五.Order classes(列排序)
#直接使用flex中的order排序
<div class="col order-5">

六.Offsetting columns(列偏移)
1.Offset classes
<div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>

2.关联操作
<div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div>

3.Margin utilities
1).ms-auto
<div class="col-md-4 ms-auto">.col-md-4 .ms-auto</div>

2).ms-md-auto
<div class="col-md-3 ms-md-auto">.col-md-3 .ms-md-auto</div>

2).me-auto
<div class="col-auto me-auto">.col-auto .me-auto</div>

七.独立列类
#不是row的子元素
1.直接使用
<div class="col-3 bg-light p-3 border">

2.结合使用
<img src="..." class="col-md-6 float-md-end mb-3 ms-md-3">