Wie verwenden von flex-grow in Bootstrap v4?

In der doc und die Probleme der Bootstrap v4 (hier)
Ich kann nicht sehen, jeder plan auf die Unterstützung von "flex-grow", etwas mit einer syntax wie in diesem Beispiel:

<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 ein Beispiel des Layouts möchte ich erstellen:

Wie verwenden von flex-grow in Bootstrap v4?

Den export-button ist immer auf der rechten Seite, und die navigation-Taste nimmt alle den Raum verlassen und daher sauber aussieht.

Ist es möglich, den Bau einer solchen Anordnung bereits ? Vielleicht ist es nicht ratsam ? Natürlich gibt es workarounds mit CSS, aber ich bin auf der Suche nach einer sauberen Lösung, idealerweise mit Bootstrap Klassennamen nur, um zu gewährleisten Konsistenz.

InformationsquelleAutor der Frage Eric Burel | 2017-02-09

  1. 0

    Ich eine Klasse angelegt, die für diese, ich habe in der Bootstrap docs und nichts gefunden.

    .flex-2 { flex-grow: 2 }

    col-auto nimmt den übrigen Raum aber wenn Sie mehr als eine Zeile, so dass der Raum nicht gleichmäßig verteilt sein. Das ist, warum flex-grow funktioniert der trick.

    InformationsquelleAutor der Antwort LTroya

Schreibe einen Kommentar