ändern div höhe zu 2 divs

Question

Ich benutze twitter Bootstrap und ich kann nirgendwo für diese Frage eine Antwort finden. Ich versuche, die Höhe von div zu ändern, um Höhe von zwei divs daneben zu passen. Ich weiß nicht, ob das eine gute Erklärung ist, also werde ich versuchen, mein Problem mit Bildern zu zeigen. Wie man aus dieser machen:

etwas wie folgt aus:

HTML:

<div class ="col-md-4 main-card-wrapper"> 
<div class="main-card">1</div> 
</div> 
<div class ="col-md-4 main-card-wrapper"> 
<div class="main-card">2</div> 
</div> 
<div class ="col-md-4 main-card-wrapper"> 
<div class="main-card">3</div> 
</div> 
<div class ="col-md-12 main-wrapper"> 
<div class ="col-md-4 main-card-wrapper"> 
    <div class="main-card">4</div> 
</div> 
<div class ="col-md-8 main-wrapper"> 
<div class ="col-md-6 main-card-wrapper"> 
    <div class="main-card">5</div> 
</div> 
<div class ="col-md-6 main-card-wrapper"> 
    <div class="main-card">6</div> 
</div> 
<div class ="col-md-12 main-card-wrapper"> 
    <div class="main-card">7</div> 
</div> 
</div> 
</div> 

CSS:

.main-card-wrapper { 
    padding-left: 0.1em !important; 
    padding-right: 0.1em !important; 
} 
.main-wrapper { 
    padding-left: 0em !important; 
    padding-right: 0em !important; 
} 
.main-card { 
    display: inline-block; 
    padding: 2em; 
    width: 100%; 
    margin: 0.1em; 
    color: #ddffdd; 
    background-color: #879eff; 
    text-align: center; 
} 
.main-card:hover { 
    color: #f4f4f4; 
    background-color: #6185ff; 
} 

Answer 1

versuchen Sie, geben Sie das Div, das Sie eine einzigartige Klasse oder eine ID in der Größe ändern und dann in CSS geben Sie Höhe 100% oder Auto.

Answer 2

Wenn Sie ein Raster ineinander verschachteln, kann Nummer 4 die volle Höhe seiner eigenen Spalte erhalten, wenn Sie Inhalt hinzufügen. Es wird funktionieren, wenn Sie nur eine bestimmte Höhe hinzufügen.

HTML

<div class="row"> 
<div class="col-md-4 1">1</div> 
<div class="col-md-4 2">2</div> 
<div class="col-md-4 3">3</div> 
</div> 
<div class="row"> 
<div class="col-md-4 4">4</div> 
<div class="col-md-8 row"> 
<div class="col-md-6 5">5</div>  
<div class="col-md-6 6">6</div> 
    <div class="row"> 
    <div class="col-md-12 7">7</div> 
    </div> 
</div> 

CSS

.1, .2 , .3, .5, .6, .7 { 
    height: 100px; 
} 
.4 { 
    height: 200px; 
}