响应层

BootStrap中有一个很关键的概念叫做响应层。在BootStrap 4中，响应层分为以下几种：

-sm: 表示 "small"（小屏幕）断点。当屏幕宽度达到或超过小屏幕的断点时，该样式将生效。
-md: 表示 "medium"（中等屏幕）断点。当屏幕宽度达到或超过中等屏幕的断点时，该样式将生效。
-lg: 表示 "large"（大屏幕）断点。当屏幕宽度达到或超过大屏幕的断点时，该样式将生效。
-xl: 表示 "extra large"（超大屏幕）断点。当屏幕宽度达到或超过超大屏幕的断点时，该样式将生效。

例如：-sm代表只有当此时的视口宽度大于576px时才会生效。而-md则代表只有视口宽度大于768px时才会生效。

响应层可以结合bootstrap中的许多类名，例如 container-sm,col-md-3等。

栅格系统

1、列

BootStrap中对列的显示逻辑是：当视口宽度满足响应层的宽度时，则按照设置的列占比来占位。否则不论写了占位多少，一律独占一行。

比如col-xl-2:按道理只占位一行中的2份，但是如果此时屏幕大小小于xl要求的1200px，那么此时会直接占位一整行，把12格都占满。

响应列

col-sm-*:可以设置当视口宽度满足指定响应层下占n列为一格。

<div class="row">
    <div class="col-sm-2"></div>
    <div class="col-xl-3"></div>
</div>

上面例子，当屏幕满足xl的时候（1200px），那么此时也一定满足sm（576px），那么上面两个div就分别占位2格和3格，同时满足。

当屏幕不满足xl，只满足sm时，此时sm依然占位一行的2格，但是此时xl会换行（因为此时不满足xl），并且独占一行。

固定列

col-*: col-5,代表不论任何响应层下都显示5列。不受响应层影响。（原理其实就是把响应层设置的宽度很小，所有宽度都会满足该响应层）

等宽列

col：代表设置等宽列。设置col的列会平均分走一行中剩余宽度！

<div class="row">
    <div class="col-sm-7">单元格</div>
    <div class="col">单元格</div>
    <div class="col">单元格</div>
</div>

这个例子中，设置了占位为7的单元格，剩余5是没法平分的，那么使用col可以使得剩余两个平分剩余空间。

自适应列

col-sm-auto：可以设置宽度由内容决定。该设置下，只要视口宽度满足sm响应层（视口宽度大于576px），此时宽度完全由内容撑开，宽度可以是任何比例。当视口宽度不满足sm响应层，也就是小于576px时，那么该列会独占一行。

col-auto:无响应式的自动适应内容的列。

2、混合模式（CSS3中的媒体查询）

原理：一个div可以同时给定多种响应层列类名限定。

需求：超大屏下一行显示6个div，每个独占2行；大屏下一行显示4个，每个独占3格；中等屏下一行显示3个，每个独占4格；小屏下一行显示2个，每个独占6格；超小屏下一行显示1个，每个独占12格；

①给出6格div满足超大屏。

②给所有div 所有类名，按照需求从大屏幕到小屏幕从左往右描写。

<div class="row">
    <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-12"></div>
    <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-12"></div>
    <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-12"></div>
    <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-12"></div>
    <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-12"></div>
    <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-12"></div>
</div>

3、对齐

垂直-行对齐

对该行的所有列生效

align-items-start 顶对齐 (默认)
align-items-center 居中
align-items-end 底对齐

<div class="row align-items-center">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

垂直-列对齐

针对某一列生效

align-self-start 顶对齐
align-self-center 居中
align-self-end 底对齐

<div class="row">
    <div class="align-self-center col-md-3"></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

水平-行对齐

针对一整行的所有列生效。

水平方向不可以单独设置列的水平对齐，只有一整行的设置

justify-content-start 左对齐
justify-content-end 右对齐
justify-content-center 居中
justify-content-between 左右两端对齐
justify-content-around 分散居中对齐

4、排序

oder-*:指定列放在指定单元格。

5、列偏移

offset-md-*：让列基于原位置向右偏移一段距离。

6、列间距

mr-sm-auto:sm响应层时，右侧边距自动撑开（把剩余空间当作边距）

ml-sm-auto:sm响应层时，左侧边距自动撑开（把剩余空间当作边距）

<div class="row">
    <div class="col-xl-2 ml-md-auto">中屏下，左边距自动撑开</div>
    <div class="col-xl-2 mr-md-auto">中屏下，右边距自动撑开</div>
</div>

bootstrap（二）栅格系统-列的运用

响应层