Spacing: margin, padding, gap
m是margin，p是padding。
单用m或p是上下左右同时。
组合时，m或b可以和b: bottom，t：top，x：左右，y：上下，s：start左边，e：end右边，组合。
ms-auto，可以把所用东西放到前面；me-auto，把所有东西放到后面
后面的数可以加0-5,或auto。数字比这个高就没用。
比如mb-3，element下面留些space。
比如px-3，水平两侧留些位置。
比如mx-auto是居中。
p和m有时候可以混用，但作区分的话，padding是在旁边加一圈（变胖），margin是和周围的东西保持距离（远离东西）
gap: 比如gap-3，可以让里面的children有gap，上下左右维度上的。
垂直维度的gap，用row-gap-3
水平维度的gap，用column-gap-3
d-flex
最常用的，把东西放到一排，居中间隔，根据屏幕大小调整排数。
Div(*list_div,cls="d-flex flex-wrap gap-4 justify-content-center")
Div的cls以d-flex开头，d-flex用于arrange那些里面有children的。
添加图片注释，不超过 140 字（可选）
justify-content: 居中是d-flex justify-content-center，center也还有其他选项，比如evenly，是把children evenly 水平散开。left是都考左。
flex-row/column: 水平铺开或垂直铺开。
align-items：-center, 对其children align，默认水平。
Sizing
width 百分比：w-25 。 mx就是max-width
height百分比: h-25。 mh就是max-height
Stacks
用于children element
vstack: 垂直放，cls里面放 vstack gap-2
hstack：水平放，hstack gap-3
Display property
d-inline:
添加图片注释，不超过 140 字（可选）
d-block就是普通的上下两个block
Grid
如果从小到大的grid都是一致的，直接用col，否则用col-lg, col-sm等。
用col-sm-数字的话，可以在缩小的时候自动垂直stack，长度相同。
row里面的col的宽度可以是自动的
添加图片注释，不超过 140 字（可选）
设置一个是col-5，剩下两个会自动缩小。
如果用col-auto会根据字符来伸缩，比如下面例子中的中间block因为字符多，所以占得space多
添加图片注释，不超过 140 字（可选）
用row-cols-数字可以自动帮你换行
添加图片注释，不超过 140 字（可选）
---------------
关于水平放置的方法
- row (col, col, col)
- d-inline, d-inline, d-inline
- hstack ( a, b, c)
- d-flex flex-row (a,b,c)