我真的无法想到其他任何事情，这让我非常困扰。
为什么boostrap.css中的网格对.col-sm-*, .col-md-*等有不同的媒体查询，但flex: ;＆amp; 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%; }
提前感谢！
答案 0 :(得分：0)
因为它是col-sm-1还是col-md-1 flex和max-width都具有相同的值，因为它是一个百分比值（意味着它始终是父母的百分比）
每个例子：
对于col-sm-1，最大宽度始终为父级宽度的8.333333% ...等等
答案 1 :(得分：0)
就是这样，因为你可以在你的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-*类仅在媒体查询中定义，因此仅在屏幕宽度与媒体查询匹配时才有效。
按照建议的方式进行操作不会起作用，因为该课程将始终处于活动状态。
希望这能解决你的疑虑。