Bootstrap中的栅格系统

颛孙成益
2023-12-01

栅格系统:
xl为超大屏,屏幕宽度>=1200px,容器的宽度固定为1140px,一行可以设置12列,屏幕尺寸<1200的时候,一行只能设置1列
lg为为大屏,屏幕宽度>=992px,容器的宽度固定为960px,一行可以设置12列,屏幕尺寸<992的时候,一行只能设置1列
md为中等屏,屏幕宽度>=768px,容器的宽度固定为720px,一行可以设置12列,屏幕尺寸<768的时候,一行只能设置1列
sm为小屏,屏幕宽度>=576px,容器的宽度固定为540px,一行可以设置12列,屏幕尺寸<576的时候,一行只能设置1列
col为超小屏,屏幕宽度<576px,容器的宽度为auto,一行永远可以设置12列

设置等宽列,平分宽度,通过.col的class去设置
设置多行等宽列,在希望断开的地方添加一个.w-100的class,能够让后面的列换行
设置根据内容调整列的宽度,使用.col-{breakpoint}-auto
设置所有尺寸下,都占同样的列数,使用.col-*

混合排列或者组合模式
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列

对齐
垂直对齐:
1.行的对齐方式
align-itens-start 顶对齐
align-items-center 中间对齐
align-items-end 底对齐
2.列的单独对齐方式
align-self-start 顶对齐
align-self-center 中间对齐
align-self-end 底对齐
水平对齐
1.justify-content-start 左对齐
2.justify-content-center 居中对齐
3.justify-content-end 右对齐
4.justify-content-around 分散居中对齐(每个元素两侧的间距是相等的)
5.justify-content-between 左右两端对齐(元素之间的间距是自动平分的)

列排序:使用.order-{breakpoint}-* (1-12)
order-first代表排序在第一位,order-last代表排在最后一位
3.x的版本使用的是.col-{breakpoint}-push-* .col-{breakpoint}-pull-*l来排序

列偏移:使用offset-{breakpoint}-*

间距:使用margin工具可以让列之间产生间距
mr-{breakpoint}-auto 使右侧的列远离到最右边
ml-{breakpoint}-auto 使左侧的列远离到最左边

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

 类似资料: