如何动态调整Bootstrap网格列宽？col-md-5为空时col-md-7转col-md-12

方案1：纯CSS（利用:empty伪类） #

适合静态内容场景，无需JS介入。核心是通过CSS伪类判断第二列是否为空，动态调整第一列宽度：

首先确保列结构包裹在.row容器内，然后添加以下CSS：

/* 当col-md-5为空时，让col-md-7占满整行 */
.row:has(.col-md-5:empty) .col-md-7 {
  flex: 0 0 100%;
  max-width: 100%;
}
/* 隐藏空的第二列 */
.col-md-5:empty {
  display: none;
}

注意：:has()伪类需现代浏览器支持（Chrome 88+、Firefox 121+、Safari 15.4+）；:empty仅对**完全无内容（包括空格、换行）**的元素生效，若列内有空白字符需先清理。

方案2：JavaScript动态切换类名 #

兼容旧浏览器或动态加载内容的场景，步骤如下：

// 获取目标列元素
const col7 = document.querySelector('.col-md-7');
const col5 = document.querySelector('.col-md-5');

// 判断第二列是否真正为空（剔除空白字符）
const isCol5Empty = col5.textContent.trim() === '';

// 动态调整类名与显示状态
if (isCol5Empty) {
  col7.classList.replace('col-md-7', 'col-md-12');
  col5.style.display = 'none';
} else {
  col7.classList.replace('col-md-12', 'col-md-7');
  col5.style.display = 'block';
}

如果内容是异步加载的，需在内容更新后重新执行上述判断逻辑。

方案3：后端渲染时动态设置类名 #

若页面为服务端渲染（如PHP、Node.js模板），可直接在后端判断内容状态，输出对应结构：

以PHP为例：

<?php
$content2 = "... content 2 ..."; // 从数据源获取内容
$col7Class = empty(trim($content2)) ? 'col-md-12 no-padding' : 'col-md-7 no-padding';
?>

<div class="<?php echo $col7Class; ?>">
... content 1 ...
</div>
<?php if (!empty(trim($content2))): ?>
<div class="col-md-5">
<?php echo $content2; ?>
</div>
<?php endif; ?>

这种方式无需前端处理，渲染阶段就完成了列结构的适配，稳定性最高。

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