bootstrap中的冗余col类

Question

我在Bootstrap中做了很多这个：

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

是否有任何简写的CSS类表示“对所有视口大小使用此col大小？”也许是下面这样的事情？

<div class="col-all-4">...

Answer 1

修改media queries类名的col-*适用于min-width，无限制为max-width值，如：

@media (min-width: 992px) {
  //For md
}

xs元素的默认值。因此，您可以采取哪些措施来避免冗余的col名称，只需使用该列数调用所需的最小设备：

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

必须是

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

Answer 2

对于您需要的所有屏幕尺寸xs，如果未指定其他屏幕，它可以提供所有屏幕。

<div class-"col-xs-4"> .... </div>

<强> FYI

如果xs指定col-xs-4而未指定其他屏幕，那么它等同于col-xs-4 col-sm-4 col-md-4 col-lg-4。

如果您指定col-xs-8 and col-md-4，则表示col-xs-8 col-sm-8 col-md-4 col-lg-4

因此换句话说，更高的屏幕会覆盖屏幕下方列的宽度。但是较低的屏幕不显示此属性。