css - Bootstrap 网格疑惑

Question

我真的无法考虑其他任何事情，这让我非常困扰。

为什么 boostrap.css 中的网格对 .col-sm-*、.col-md-* 等有不同的媒体查询 但 flex : ; & max-width: ; 里面都是一样的吗？!

为什么他们不使用“通配符选择器”并只定义一次？

像这样:

[class*="col-1-"] { flex: 0 0 8.333333%; max-width: 8.333333%; }
[class*="col-2-"] { flex: 0 0 16.666667%; max-width: 16.666667%; }

代替

.col-sm-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
.col-sm-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }

提前致谢!

Answer 1

就是这样，因为你可以在你的 html 中使用这样的东西:

<div class="row">
  <div class="col-12 col-sm-6 col-md-8">1st column</div>
  <div class="col-12 col-sm-6 col-md-4">2nd column</div>
</div>

基本上，如果屏幕尺寸为 min-width: 576px，则使用 .col-sm-6 而不是其他两个。

.col-md-* 类仅在媒体查询中定义，因此仅当屏幕宽度与该媒体查询匹配时才会激活。

按照您建议的方式进行操作是行不通的，因为该类将始终处于事件状态。

希望这能消除您的疑虑。