Put Formen unterschiedlicher Größe Seite an Seite mit Bootstrap

Question

Hier ist, was ich versuche zu tun:

Hier ist, was ich jetzt mit dem folgenden Code bekommen:

<div class="col-xs-12 col-sm-6 col-md-6 centered-form"> 
    </div> 

<div class="col-xs-12 col-sm-6 col-md-6 centered-form"> 
    </div> 

<div class="col-xs-12 col-sm-6 col-md-6 centered-form"> 
    </div> 

Irgendwelche Hilfe dabei?

Answer 1

Sie müssen das mittlere Element schweben, vorausgesetzt, es ist das höchste Element auf der rechten Seite. Standardmäßig wird eine Spalte nach links verschoben, überschreiben Sie sie einfach. Sieh die Geige unten, entferne den Schwimmer rechts und schau was passiert.

.centered-form:nth-of-type(1){ 
 
    height:400px; 
 
    background-color: blue; 
 
} 
 

 
.centered-form:nth-of-type(2){ 
 
    height:800px; 
 
    background-color: red; 
 
    float: right; 
 
} 
 

 
.centered-form:nth-of-type(3){ 
 
    height:400px; 
 
    background-color: yellow; 
 
}

<!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" 
 
     integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
<div class="col-xs-12 col-sm-6 col-md-6 centered-form"> 
 
</div> 
 

 
<div class="col-xs-12 col-sm-6 col-md-6 centered-form"> 
 
</div> 
 

 
<div class="col-xs-12 col-sm-6 col-md-6 centered-form"> 
 
</div>