如何使用 flex-grow？

Question

在文档和 Bootstrap v4 (here) 的问题中，我看不到任何支持 flex-grow 的计划，例如，语法如下：

 <div class="d-flex">
      <div  class="flex-grow">
        I use all the space left
      </div>
      <div>
        I am a small text on the right
      </div>
</div>

这是我要创建的布局示例：

导出按钮总是在右边，导航按钮占据了左边的所有空间，因此看起来很干净。

是否有可能建立这样的布局？也许不建议这样做？当然，有使用 CSS 的解决方法，但我正在寻找一个干净的解决方案，理想情况下使用 Bootstrap 类名只是为了保证一致性。

原文由 Eric Burel 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

使用 .col 一个简单的 flex-grow: 1; 。它在这里描述 https://v4-alpha.getbootstrap.com/layout/grid/#variable-width-content

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col">
      I use all the space left
    </div>
    <div class="col-sm col-sm-auto">
      I am a small text on the right
    </div>
  </div>
</div>

原文由 Michael Coker 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

对于任何从谷歌搜索来到这里的人（比如我）。

由于 Bootstrap v 4.1 有 flex-grow 和 flex-shrink 实用程序，因为 文档 说你可以像这样使用它们：

 .flex-{grow|shrink}-0
.flex-{grow|shrink}-1
.flex-sm-{grow|shrink}-0
.flex-sm-{grow|shrink}-1

这是一个小例子

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />

<div class="d-flex flex-row">
  <div class="d-flex flex-grow-1 text-white justify-content-center bg-danger">
    Grow 1
  </div>
  <div class="d-flex flex-grow-0 text-white justify-content-center bg-success">
    Grow 0
  </div>
  <div class="d-flex flex-grow-1 text-white justify-content-center bg-danger">
    Grow 1
  </div>
</div>

原文由 user4914734 发布，翻译遵循 CC BY-SA 3.0 许可协议