Bootstrap 4 请给我解释一下这个特定示例中引导网格的行为

我正在学习BootstrapVer4.4.1并试图理解这段代码

<div class="container">
<div class="row">
<div class="col">1</div>               <!--First line-->
<div class="col-sm">2</div>            <!--Second line-->        
<div class="col">3</div>               <!--Third line--> 
</div>
</div>

1.
2.
3.

---

对于breakpoint=576px，有人能解释一下输出与我预期的偏差吗。我正在附加原始输出和预期输出的图像。图像在这里。简单的回答是：因为它应该是这样工作的

然而，根据自举自动列布局，第一行中的列和第三行中的列应分别形成第一行和第三行中的列6，并应显示第一行中列的50%宽度和第三行中列的50%宽度以及第2行中列的整个跨度

我不确定我是否理解正确，但这不是

col

vs

col-sm

的工作方式。它们不是它们所占宽度的指标，只是它们应该被考虑的时间

col

和

col sm

都试图根据列表中的其他元素调整其大小。但是

col sm

仅对断点

sm

及更高的断点执行此操作。这就是为什么在

sm

和更高版本上显示三个水平列（所有三个列都是flexbox的一部分，并且假定宽度和布局相等）

一旦到达

xs

，

col sm

类将“丢失”其flexbox属性，不再根据flex元素（第1列和第3列）调整大小，而是假定宽度为100%。这反过来又会导致其他两列也自动调整大小为100%，因为它们不再能够自动布局为33%

要获得所需的结果，您必须实际使用

col-*

指定列的宽度

1.
2.
3.

你的问题需要更加集中，尽量不要一次问很多问题