Bootstrap v4でflex-growthを使用するには？ docにとブートストラップv4の<a href="https://v4-alpha.getbootstrap.com/utilities/flexbox/" rel="noreferrer" title="bootstrap v4 flex support">(here)</a> の問題で

Question

、私は「フレックス成長」を支援する上で任意の計画を見ることができない、例えばこのような構文で何か：

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