如何使用flex-grow？

Question

在文档和Bootstrap v4 (here)的问题中，我看不到任何关于支持<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> 的计划，例如这样的语法：

      0     1    2    3    4    5
0  41.0  22.0  9.0  4.0  2.0  1.0
1   6.0   1.0  2.0  1.0  1.0  1.0
2   4.0   2.0  4.0  1.0  0.0  1.0
3   1.0   2.0  1.0  1.0  1.0  1.0
4   5.0   1.0  0.0  1.0  0.0  1.0
5  11.4   5.6  3.2  1.6  0.8  1.0

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

导出按钮始终在右侧，导航按钮占用了所有空间，因此看起来很干净。

是否可以建立这样的布局？也许不建议？当然，有一些使用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>

Answer 2

对于任何来自Google搜索（例如我）的人来说。

自Bootstrap v 4.1以来，有flex-grow和flex-shrink实用程序，因为documentation表示您可以像这样使用它们：

.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>

Answer 3

我为此创建了一个类，我检查了Bootstrap文档，但没有发现它。

.flex-2 { flex-grow: 2 }

col-auto占用剩余空间，但如果您有多行，那么空间不会被平均分配。这就是flex-grow解决问题的原因。