Bootstrap Grids怀疑

我实际上无法思考其他任何事情，这让我感到非常困扰。Bootstrap Grids怀疑

为什么网格中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%; }

在此先感谢！

我想最大宽度在这里代表旧的浏览器....其中flex不支持:) –

这是一个方式，因为这样你就可以在你的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而不是其他两个。

A .col-md-*类仅在媒体查询中定义，因此只有在屏幕宽度与媒体查询匹配时才有效。

按照您建议的方式执行此操作并不奏效，因为该班级将始终处于活动状态。

希望这可以消除你的疑惑。

2017-09-02 20:04:36 gxt

老兄！这实际上是有道理的。我从来没有想过你可以做到这一点。我总是对它进行编码。 – user8552817

感谢您的解释。我猜也一样，row- * offset- *和其他。 – user8552817

是的，那是真的。 – gxt

因为无论是col-sm-1或col-md-1两者flex和max-width将具有相同的价值，因为它是一个百分比值（这意味着它永远是，父母的百分比）

每例如： 为col-sm-1最大宽度将始终是父母的宽度8.333333% ...等

2017-09-02 19:38:01 Sletheren

这是我的观点。没有必要单独定义它们，就像他们做的那样...... – user8552817

的确，我认为没有必要这样做 – Sletheren

回答