Bootstrap 4 belebtes Spaltenbreitenänderung

Ich habe zwei Spalten wie folgt aus:Bootstrap 4 belebtes Spaltenbreitenänderung

<div class="container"> 
    <div class="row"> 
     <div class="col-9"></div> 
     <div class="col-3"></div> 
    </div> 
</div>

Ich bin die Klassennamen über Winkelschalt col-8 offset-2 und col-0 zu sein. col-0 ist width:0;margin:0;padding:0.

Ich frage mich, wie man sowohl die Breite, als auch die Positionen der Spalten animiert.

Quelle

2017-03-23 userqwert

Haben Sie etwas versucht, so weit? – ZimSystem

Ich habe eckiges eingebautes belebtes System versucht, das nicht funktioniert, weil mein div einen Fräserausgang enthält, ich habe auch Stile versucht, aber ich kann nicht herausfinden, wie man die Breiten und Positionen glatt ohne einzuwickeln auf eine neue Linie übersetzt. Ich habe Autoweiten-Spalten versucht, die auch nicht zu funktionieren scheinen. – userqwert

http://stackoverflow.com/questions/12520751/animate-bootstrap-columns –

Da Bootstrap 4 flexbox verwendet, funktionieren CSS-Übergangsanimationen nur, wenn Sie für die Spalten einen numerischen flex-grow oder flex-shrink festlegen.

.col-8 { 
    flex-grow: 1; 
    transition: all 400ms ease; 
} 

.col-0 { 
    width: 0; 
    flex-shrink: 1; 
    transition: all 400ms ease; 
}

Demo: http://www.codeply.com/go/4Un0Q8CvkQ

Quelle

2017-03-23 15:51:06 ZimSystem

Bootstrap 4 belebtes Spaltenbreitenänderung

Antwort

Verwandte Themen