Wie funktioniert Flex-Grow in Bootstrap v4?

Question

Im doc und in den Fragen der Bootstrap v4 (here) , kann ich zum Beispiel einen Plan sehen nicht wie diese mit einer Syntax „Flex-wachsen“, etwas auf die Unterstützung:

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

Hier ist ein Beispiel von das Layout Ich mag würde erstellen:

der Export-Knopf immer auf der rechten Seite, und die Navigationstaste nimmt den ganzen Raum verlassen und deshalb sieht sauber.

Ist es möglich, ein solches Layout bereits zu erstellen? Vielleicht ist es nicht ratsam? Natürlich gibt es Workarounds mit CSS, aber ich suche nach einer sauberen Lösung, idealerweise mit Bootstrap-Klassennamen, um Konsistenz zu garantieren.

Answer 1

Verwenden Sie .col für eine einfache flex-grow: 1;. Es ist hier beschrieben 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>