css - 如何使用 flex 增长？

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 类名来保证一致性。

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>