Bootstrap是否存在通用列宽处理类？如何合并列类减少代码重复？

嘿，我来帮你捋清楚这两个Bootstrap的问题：

1. 是否存在可处理所有列宽度的Bootstrap类？ #

Bootstrap本身没有一个原生的“万能列宽类”，但其实有更简洁的写法来实现所有断点下相同列宽的效果：

• 在Bootstrap 3中，栅格是移动优先的——小断点的样式会自动被更大的断点继承。比如你只需要写col-xs-6，那么col-sm-6、col-md-6、col-lg-6的效果就自动生效了，完全不用重复写四个类。
• 在Bootstrap 4/5里，写法更简化，直接用col-6就可以让元素在所有断点（从最小的xs到最大的xl）下都占6列宽度，一步到位。

所以不用找什么特殊类，利用Bootstrap的移动优先特性就能轻松实现需求。

2. 能否通过自定义“父类”合并多个CSS类减少冗余？ #

当然可以！这是个非常实用的代码优化技巧，有几种靠谱的实现方式：

方法1：自定义CSS类 #

直接写一个自己的类，把需要的Bootstrap列样式整合进去。注意要把你的自定义CSS放在Bootstrap样式之后加载，避免样式被覆盖。比如：

.all-column {
  flex: 0 0 50%;
  max-width: 50%;
  padding-right: 15px;
  padding-left: 15px;
  position: relative;
  width: 100%;
}

这样<div class="all-column"></div>就和你原来写四个类的效果一致了。

方法2：用预处理器（推荐） #

如果你的项目用了Sass或LESS这类预处理器，用@extend指令直接继承Bootstrap的类是最稳妥的——既能保证样式和原生Bootstrap完全一致，还能同步Bootstrap的更新。比如Sass写法：

// Bootstrap 3
.all-column {
  @extend .col-xs-6;
}

// Bootstrap 4/5
.all-column {
  @extend .col-6;
}

编译后，.all-column就会拥有对应Bootstrap列类的所有样式，用起来超省心。

不推荐的方式 #

虽然也能用JS动态添加类，但这种方式会增加页面加载的复杂度，不如直接写CSS类高效，所以一般不建议这么做。

内容的提问来源于stack exchange，提问作者BigBen_Davy