如何通过变量或更优方式批量修改Bootstrap列宽度？

你之前的写法无效是因为CSS变量不能直接嵌入HTML类名中——HTML解析类名时不会识别CSS变量，导致生成的类名是col-md-(var(--elementColumns))，这是个无效类，所以元素不显示。下面是具体的解决方案：

优先CSS方案 #

方案1：自定义基于CSS变量的列类（最灵活） #

放弃直接用Bootstrap的col-md-x，自己写一个支持变量控制的列类，复用Bootstrap网格的12列逻辑：

/* 全局设置变量，可按需修改 */
:root {
  --md-column-count: 3; /* 默认3列宽度 */
}

/* 基础列样式，对齐Bootstrap的.col */
.col-md-custom {
  position: relative;
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
}

/* 中等屏幕下的宽度控制 */
@media (min-width: 768px) {
  .col-md-custom {
    flex: 0 0 calc(var(--md-column-count)/12 * 100%);
    max-width: calc(var(--md-column-count)/12 * 100%);
  }
}

使用时HTML改成：

<div class="col-md-custom rock imgProperties"></div>

• 全局修改：直接修改:root里的--md-column-count值，所有col-md-custom都会同步变化
• 局部修改：给某个父元素单独设置变量，只影响该区域内的列：

.special-section {
  --md-column-count: 6;
}

方案2：重写现有col-md-3的样式（适配已有代码） #

如果你的HTML里已经大量使用了col-md-3，不想改HTML结构，可以直接重写这个类的样式，用变量控制宽度：

:root {
  --md-column-count: 3;
}

@media (min-width: 768px) {
  .col-md-3 {
    flex: 0 0 calc(var(--md-column-count)/12 * 100%);
    max-width: calc(var(--md-column-count)/12 * 100%);
  }
}

这样所有原本的col-md-3元素，宽度会根据--md-column-count的值自动计算，不用改HTML。

JS解决方案（动态修改类名） #

如果需要根据用户交互或者其他动态场景修改列宽，可以用JS批量替换类名：

// 定义目标列数
const targetCol = 6;
// 选中所有带col-md-3的元素
const colElements = document.querySelectorAll('.col-md-3');

colElements.forEach(element => {
  // 替换类名中的3为目标数字
  element.classList.replace('col-md-3', `col-md-${targetCol}`);
});

如果需要支持动态切换，可以封装成函数：

function changeMdColumns(targetCol) {
  document.querySelectorAll('.col-md-3').forEach(el => {
    el.classList.replace('col-md-3', `col-md-${targetCol}`);
  });
}

// 调用示例：改成4列宽度
changeMdColumns(4);

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