如何在Bootstrap 5.2中避免重复指定col-lg-*与col-md-*类？

针对你的需求，这里有两个无需依赖LESS、且不重复Bootstrap逻辑的可行方案：

方案1：原生CSS复用Bootstrap 5的CSS变量 #

Bootstrap 5暴露了大量全局CSS变量（包括断点、gutter间距等核心配置），你可以直接复用这些变量定义自定义类，确保样式和Bootstrap原生行为完全一致：

左侧列样式 #

.left-column {
  /* 基础样式：继承Bootstrap列的盒模型和间距 */
  position: relative;
  width: 100%;
  padding-right: calc(var(--bs-gutter-x) * .5);
  padding-left: calc(var(--bs-gutter-x) * .5);
}

/* MD断点及以上：对应col-md-6（50%宽度） */
@media (min-width: var(--bs-breakpoint-md)) {
  .left-column {
    flex: 0 0 auto;
    width: 50%;
  }
}

/* LG断点及以上：对应col-lg-3（25%宽度） */
@media (min-width: var(--bs-breakpoint-lg)) {
  .left-column {
    width: 25%;
  }
}

右侧列样式 #

.right-column {
  position: relative;
  width: 100%;
  padding-right: calc(var(--bs-gutter-x) * .5);
  padding-left: calc(var(--bs-gutter-x) * .5);
}

/* MD断点及以上：对应col-md-6（50%宽度） */
@media (min-width: var(--bs-breakpoint-md)) {
  .right-column {
    flex: 0 0 auto;
    width: 50%;
  }
}

/* LG断点及以上：对应col-lg-9（75%宽度） */
@media (min-width: var(--bs-breakpoint-lg)) {
  .right-column {
    width: 75%;
  }
}

这种方式完全复用Bootstrap的核心配置，后续Bootstrap更新断点或间距值时，自定义类会自动同步，不会出现样式不一致的问题。

方案2：使用Sass的@extend继承Bootstrap类（适配GitHub Pages环境） #

GitHub Pages默认支持Jekyll，而Jekyll原生支持Sass编译。你可以通过Sass的@extend特性直接继承Bootstrap的列类样式，无需手动编写媒体查询：

1. 确保项目中引入Bootstrap的Sass源文件（本地安装或通过npm引入均可）
2. 在自定义Sass文件中编写：

.left-column {
  @extend .col-md-6;
  @extend .col-lg-3;
}

.right-column {
  @extend .col-md-6;
  @extend .col-lg-9;
}

编译后的CSS会自动将自定义类合并到Bootstrap的列类规则中，实现和直接写col-lg-3 col-md-6完全一致的效果，同时避免了HTML中的类重复。

注意事项 #

• 若使用GitHub Pages默认Jekyll配置，只需将Sass文件放在_sass目录下，或命名为.scss后缀的文件，Jekyll会自动编译成CSS。
• 依赖Bootstrap Sass源时，可通过npm安装bootstrap包，再在Sass中引入：@import "bootstrap";

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