Bootstrap 网格系统有条件地调整 col 宽度答案

【问题标题】：Bootstrap grid system conditionally flex col widthBootstrap 网格系统有条件地调整 col 宽度
【发布时间】：2019-04-24 05:15:25
【问题描述】：

我有这个加载了引导 (3.7) CSS 的 HTML：

<div class="row">
  <div class="col-xs-6">Stretch ME!</div>
  <div class="col-xs-6">Conditional</div>
</div>

“条件” div 有时存在，有时不存在。如果没有条件地重写类，最好使用bootstrap，如何使 "Stretch ME!" div 拉伸到 row 宽度。例如，class="col-xs-6 but-flex-me-if-over-blank-space"。

附：不敢相信这个问题以前没有被问过，而且遇到了很多……但我找不到关于 SO 的明确答案。

【问题讨论】：

【解决方案1】：

.row {
  display: flex;
  width: 100%;
}
.row .col-xs-6:first-child {
    flex-grow: 1;
}

flex-grow 将填满可用空间。

【讨论】：