col-sm 和 col-sm-n 之间的区别

Question

1. 当单元格定义为：

<div class= "col-4 col-sm-2 col-md-4"> ... </div>

对于小屏幕，单元格占用宽度的 2/12（根据 col-sm-2）。

2. 但是当单元格定义为：

<div class= "col-4 col-sm col-md-4"> ... </div>

对于小屏幕，单元格占用宽度的 4/12（根据第 4 栏）。

我理解第一种情况，但不理解第二种情况。 为什么在小屏幕的第二种情况下没有考虑“col-sm”？

我知道 col-4 表示所有屏幕尺寸的宽度的 4/12。 但在第一种情况下，对于小屏幕，col-4 被 col-sm-2 覆盖，那么为什么在第二种情况下 col-4 不被小屏幕的 col-sm 覆盖呢？

我觉得如果考虑“col-sm”，对于小屏幕（即行的整个剩余空间），单元格的宽度将被视为 col。

Answer 1

由于您没有提到空间，所以

col-sm

将占据整个空间而不是

2/12

。如果您想为此设置不同的空间，请务必提及空间

div

。