是否可以将多个Bootstrap类合并为单个自定义类以实现代码复用？

Bootstrap表单重复类复用实现方案 #

完全可以实现你需要的类复用效果，仅需注意：原生CSS不支持你示例中直接嵌套Bootstrap类的写法，可根据你的技术栈选择以下两种方案：

方案1：使用Sass/SCSS（推荐，Bootstrap原生支持）

Bootstrap本身基于Sass开发，只要你项目引入了Bootstrap的Sass源文件，就可以用@extend语法直接继承现有Bootstrap类，和你期望的写法完全一致：

// 需提前引入Bootstrap的Sass入口文件
.form-label-wrapper {
  @extend .col-12;
  @extend .col-sm-auto;
  @extend .d-flex;
  @extend .justify-content-md-end;
}

HTML中直接使用自定义类即可：

<div class="form-label-wrapper">
  <label>...</label>
</div>

方案2：原生CSS实现

如果你的项目无法使用预处理器，可以直接把对应Bootstrap类的样式规则提取到自定义类中，效果完全相同：

.form-label-wrapper {
  width: 100%;
  display: flex !important;
}
/* 对应sm断点样式 */
@media (min-width: 576px) {
  .form-label-wrapper {
    width: auto !important;
  }
}
/* 对应md断点样式 */
@media (min-width: 768px) {
  .form-label-wrapper {
    justify-content: flex-end !important;
  }
}

你还可以用同样的方法把外层重复的行类也封装起来，进一步减少冗余代码：

// 示例：封装行样式
.form-row-item {
  @extend .row;
  @extend .justify-content-sm-center;
  @extend .mb-2;
  @extend .align-items-center;
}

内容的提问来源于stack exchange，提问作者erik-stengel