css - Bootstrap 网格系统有条件地 flex col 宽度

Question

我有这个加载了 bootstrap (3.7) CSS 的 HTML:

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

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

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

Answer 1

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

flex-grow 将填充可用空间。

示例:https://jsfiddle.net/d8fb36w5/2/